7、 webpack 開發環境配置
阿新 • • 發佈:2020-12-04
const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: './src/js/index.js', output: { //mode:'none',//developement,production filename: './js/bundle.js', path: resolve(__dirname, 'dist') }, module: { rules: [ {//webpack 根據正則表示式,來確定應該查詢哪些檔案,並將其提供給指定的 loader。在這種情況下,以 .css 結尾的全部檔案,都將被提供給 style-loader 和 css-loader。 // .在正則中需要轉義 \. test: /\.css+$/, use: [ 'style-loader', 'css-loader' ] }, { test:/\.less$/, use:[ 'style-loader', 'css-loader', 'less-loader' ] }, { test: /\.(png|jpg|gif|svg)$/, loader: 'url-loader', options:{ name:'[name]_[hash:10].[ext]', limit: 25 * 1024, //指定輸出檔案 outputPath: 'images', esModule: false } }, //其他資源 { exclude: /\.(js|css|less|img|jpg|png|gif|html)$/, loader: 'file-loader', options: { name: '[name]_[hash:10].[ext]', //指定輸出檔案 outputPath: 'media' } } ] }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html' }) ], mode:'development', devServer:{ contentBase: resolve(__dirname,'dist'), // compress: true, open: true, port: 8080, } }