记录下自己的webpack基本配置

const path = require ( ' path ' )

const HTMLplugin = require ( ' html-webpack-plugin ' ) //页面生成工具

const webpack = require ( ' webpack ' )

const MiniCssExtractPlugin = require ( ' mini-css-extract-plugin ' ) //处理css工具

const isDev = process . env . NODE_ENV === ' development '

const config = {

target: ' Web ' ,

entry: path . join ( __dirname , ' ./src/index.js ' ),

output: {

filename: ' bundle.[hash:8].js ' ,

path: path . join ( __dirname , ' dist ' )

},

module: {

rules: [

{

test: / \.vue$ / ,

loader: ' vue-loader '

},

{

test: / \.(gif | jpg | jpeg | png | svg)$ / ,

use: [

{

loader: ' url-loader ' , //url-loader 是对file-loader的封装，它可以把图片转换为base64编码直接写在js文件里面，这样可以减少http请求，limit是对文件大小的限制

options: {

limit: 1024 ,

name: ' [name].[ext] '

}

}

]

}

]

},

plugins: [

new webpack . DefinePlugin ({

' process.env ' : {

NODE_ENV: isDev ? ' "development" ' : ' "production" '

}

}),

new HTMLplugin ()

]

}

if ( isDev ) {

config . mode = ' development '

config . module . rules . push (

{

test: / \.css$ / ,

use: [

' style-loader ' ,

' css-loader '

]

},

)

config . devtool = ' #cheap-module-eval-sourece-map '

config . devServer = {

port: 8080 ,

host: ' 0.0.0.0 ' ,

overlay: { //处理错误

errors: true ,

},

// open: true, //自动打开浏览器

hot: true , //启动热更新

}

config . plugins . push (

new webpack . HotModuleReplacementPlugin (), //热更新依赖插件

new webpack . NoEmitOnErrorsPlugin ()

)

} else {

config . mode = " production "

config . output . filename = ' [name].[chunkhash:8].js ' //hash生成名称，便于浏览器长期缓存

config . module . rules . push (

{

test: / \.css$ / ,

use: [

MiniCssExtractPlugin . loader ,

' css-loader '

]

},

);

config . plugins . push (

new MiniCssExtractPlugin ({

filename: " [name].css " ,

chunkFilename: " styles.[contentHash:8].css " //把css文件单独打包

}),

new webpack . optimize . RuntimeChunkPlugin ({ // 打包和webpack打包相关的代码

name: ' runtime '

})

)

config . optimization = {

splitChunks: {

cacheGroups: {

vendor: { //打包类库

test: / node_modules / ,

chunks: " initial " ,

name: ' vue ' ,

priority: 10 ,

enforce: true

},

commons: { //打包重复代码

chunks: ' initial ' ,

minChunks: 2 ,

maxInitialRequests: 5 ,

minSize: 0

}

}

}

}

}

module . exports = config

const path = require ( ' path ' )

const MiniCssExtractPlugin = require ( ' mini-css-extract-plugin ' )

const HtmlWebpackPlugin = require ( ' html-webpack-plugin ' )

const CleanWebpack = require ( ' clean-webpack-plugin ' )

const webpack = require ( ' webpack ' )

module . exports = {

entry: {

' app ' : ' ./app/index.js ' ,

' login ' : ' ./login/index.js ' ,

},

output: {

filename: ' [name]/[name].js ' ,

path: __dirname + ' /dist ' ,

// publicPath: '/dist'

},

module: {

rules: [{

test: / \.js$ / ,

use: [ ' babel-loader ' ],

exclude: path . resolve ( __dirname , ' node_modules ' )

},

{

test: / \.css$ / ,

use: [ MiniCssExtractPlugin . loader , ' css-loader ' ]

},

{

test: / \.(png | jpeg | jpg | svg)$ / ,

loader: ' file-loader ' ,

options: {

name: ' img/[name].[hash:8].[ext] ' ,

//服务器

publicPath: ' / ' ,

//本地环境

// publicPath: path.join(__dirname, 'dist')

}

}

]

},

// watch: true,

devServer: {

historyApiFallback: true ,

open: true ,

hot: true ,

// contentBase: path.join(__dirname, 'dist'),

// publicPath: __dirname,

compress: true ,

// proxy: {

// '/': {

// target: 'http://localhost:8080/dist/app/app.html'

// }

// }

},

plugins: [

new webpack . NamedModulesPlugin (),

new webpack . HotModuleReplacementPlugin (),

new MiniCssExtractPlugin ({

filename: ' [name]/[name]_[contenthash:8].css ' ,

chunckFilename: ' [id].css ' ,

}),

new HtmlWebpackPlugin ({

filename: ' app/app.html ' ,

inject: true ,

chunks: [ ' app ' , ' commons ' , ' vendors ' , ' manifest ' ]

}),

new HtmlWebpackPlugin ({

filename: ' login/login.html ' ,

inject: true ,

chunks: [ ' login ' , ' vendors ' , ' commons ' , ' manifest ' ]

}),

new CleanWebpack ( ' dist/*.* ' , {

root: __dirname ,

verbose: true ,

dry: false

})

// new webpack.DefinePlugin({

// 'process.env': {

// NODE_ENV: JSON.stringify('production')

// }

// }),

// new UglifyJsPlugin({

// uglifyOptions: {

// warnings: false,

// output: {

// comments: false,

// beautify: false,

// }

// }

// }),

],

optimization: {

minimize: true ,

splitChunks: {

             cacheGroups: {

                 commons: {

name: ' commons ' ,

                     chunks: " initial " ,

                     minChunks: 2 ,

                     maxInitialRequests: 5 , // The default limit is too small to showcase the effect

                     minSize: 0 // This is example is too small to create commons chunks

                 },

                 vendors: {

                     test: / node_modules / ,

                     chunks: " all " ,

                     name: " vendors " ,

                 }

             }

},

runtimeChunk: {

name: ' manifest '

}

},

mode: ' none '

}