webpack-dev-server의 자산 경로 설정하기

webpack-dev-server 을 새로 고침하여으로 설정하는 방법을 알아 냈습니다. JS 및 CSS 애셋을 index.html에 다음 경로 (/dist/js/app.min.js 및 /dist/css/styles.min.css)와 함께 제공하고 싶습니다.webpack-dev-server의 자산 경로 설정하기

도대체 webpack.config.js을 구성하여 내 assests를 index.html에로드하려면 어떻게해야합니까? 현재 구성으로 webpack-dev-server는 내 빌드를 /dist 폴더 내에서만 보유하고 index.html에서는 js 또는 css 폴더없이 경로를 설정해야합니다 (예 : (<script src="/dist/app.min.js" />)).

내 webpack.config.js :

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    context: path.resolve(__dirname, './'), 
    entry: './src/app.js', 
    output: { 
    publicPath: '/dist/', 
    path: path.join(__dirname, '/dist/js'), 
    filename: 'app.min.js' 
    }, 
    devServer: { 
    hot: true 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx', '.ts', '.tsx'] 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(scss|sass|css)$/, 
     use: ['style-loader', 'css-loader', 'sass-loader'] 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.NamedModulesPlugin(), 
    new webpack.HotModuleReplacementPlugin() 
    ] 
};

내 프로젝트 구조 : 당신이 HtmlWebpackPlugin을 잘 알고

출처

2017-11-18 exoslav

있습니까?

이 https://webpack.js.org/plugins/html-webpack-plugin/#src/components/Sidebar/Sidebar.jsx 내 설정이다 :

new HtmlWebpackPlugin({ 
    template: project.paths.client('index.html'), // absolute url to index.html 
    hash: false, 
    filename: 'index.html', 
    inject: 'body', 
})

이것은 당신의 항목 (들)을 타고 나는이 플러그인을 시도

출처

2017-11-18 17:12:50 chautelly

당신의 index.html을로 주입 것이다, 그러나 DIST 안에 index.html을을두고있다/js 폴더에 있습니다. index.html이 렌더링 될 위치를 편집하면 webpack-dev-server가 내 템플리트 index.html을 제공합니다. 또 다른 것은 ExtractTextWebpackPlugin으로 찌르기를 원할 때 CSS 링크를 추가하지 않아서 index.html 템플릿에 링크를 지정해야하지만 webpack-dev-server는 예상대로 작동하지 않습니다. – exoslav

webpack-dev-server의 자산 경로 설정하기

답변

관련 문제