1.由于开发和线上环境的配置文件不一样,所以我们把配置文件分成两个。webpack.dev.js用于开发,webpack.prod.js用于线上
webpack.prod.js
//webpack.prod.js
const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const Webpack = require('webpack')
module.exports = {
mode: "production",
devtool: 'inline-source-map',
entry:{
main22 :'./src/index.js',
},
output: {
filename: "[name].js",
path: path.resolve(__dirname,'dist')
},
// optimization: {
// usedExports: true
// },
//线上不需要devServer
// devServer: {
// contentBase:'./dist',
// open:true,//自动打开
// port:9000,
// hot:true,//要想实现HMR(Hot Module Replacement) 这里需要打开
// hotOnly:true,//这里是指即使HMR没有生效 我也不让浏览器自动刷新
// },
//htmlWebpackPlugin 会在打包结束后 自动生成一个html文件 并且把打包后js自动引入到这个html
plugins: [
new HtmlWebpackPlugin({
template:'src/index.html'
}),
// new Webpack.HotModuleReplacementPlugin(),production模式下不需要了
new CleanWebpackPlugin(),//在打包前删除dist夹
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
// use: {
// loader: "babel-loader",
// options: {
// presets: [
// ["@babel/preset-env",
// {
// useBuiltIns:"usage"
// }
// ]
// ],
// plugins: [[
// "@babel/plugin-transform-runtime" ,
// {
// "corejs": 2,
// "helpers": true,
// "regenerator": true,
// "useESModules": false
// }
// ]
// ]
// }
//
// }
},
{
test : /\.(jpg|png|gif|svg)$/,
use :{
loader: "url-loader",
options:{
// name:'[name].[ext]' //新打包出来的图片:老图片名字.老图片的后缀
name:'[name]_[hash].[ext]',
outputPath:'images/',
limit:20480 //20kb
}
}
},
{
test : /\.scss$/,
use :[
'style-loader',
{
loader: "css-loader",
options:{
importLoaders: 2, //启用/禁用或设置在CSS加载程序之前应用的加载程序数
// 0 => no loaders (default);
// 1 => postcss-loader;
// 2 => postcss-loader, sass-loader
modules: true,//启用/禁用CSS模块及其配置
}
},
'sass-loader',
'postcss-loader'
]
},
{
test : /\.css$/,
use :[
'style-loader',
'css-loader',
'postcss-loader'
]
}
]
}
}
webpack.dev.js
const path = require("path") const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const Webpack = require('webpack') module.exports = { mode: "development", devtool: 'cheap-module-source-map', entry:{ main22 :'./src/index.js', }, output: { filename: "[name].js", path: path.resolve(__dirname,'dist') }, optimization: { usedExports: true }, devServer: { contentBase:'./dist', open:true,//自动打开 port:9000, hot:true,//要想实现HMR(Hot Module Replacement) 这里需要打开 // hotOnly:true,//这里是指即使HMR没有生效 我也不让浏览器自动刷新 }, //htmlWebpackPlugin 会在打包结束后 自动生成一个html文件 并且把打包后js自动引入到这个html plugins: [ new HtmlWebpackPlugin({ template:'src/index.html' }), new Webpack.HotModuleReplacementPlugin(), new CleanWebpackPlugin(),//在打包前删除dist夹 ], module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", // use: { // loader: "babel-loader", // options: { // presets: [ // ["@babel/preset-env", // { // useBuiltIns:"usage" // } // ] // ], // plugins: [[ // "@babel/plugin-transform-runtime" , // { // "corejs": 2, // "helpers": true, // "regenerator": true, // "useESModules": false // } // ] // ] // } // // } }, { test : /\.(jpg|png|gif|svg)$/, use :{ loader: "url-loader", options:{ // name:'[name].[ext]' //新打包出来的图片:老图片名字.老图片的后缀 name:'[name]_[hash].[ext]', outputPath:'images/', limit:20480 //20kb } } }, { test : /\.scss$/, use :[ 'style-loader', { loader: "css-loader", options:{ importLoaders: 2, //启用/禁用或设置在CSS加载程序之前应用的加载程序数 // 0 => no loaders (default); // 1 => postcss-loader; // 2 => postcss-loader, sass-loader modules: true,//启用/禁用CSS模块及其配置 } }, 'sass-loader', 'postcss-loader' ] }, { test : /\.css$/, use :[ 'style-loader', 'css-loader', 'postcss-loader' ] } ] } }
package.json
以上是可以直接用的 但是webpack.dev.js和webpack.prod.js很多共同代码需要提取出来 ,我们给放到