1. 单个entry(写法1): module.exports = { entry: './input.js' 当前入口文件叫做 input.js } 2. 单个entry(写法2): module.exports = { entry: { main: '.input.js' } }; 3.多个entry module.exports = { entry : { hame : './home.js', about:'./about.js' other:'./other.js' } } 复制代码
1.单个entry情况下对应的output: module.exports = { entry: './src/index.js', output: { path : path.resolve(_dirname,'dist'), //输出后存储的路径 filename : 'output.bundle.js' // 输出后文件的名字 } }; 2.多个entry情况下对应的output: module.exports = { entry : { hame : './home.js', about:'./about.js' other:'./other.js' }, output: { path : path.resolve(_dirname,'dist'), filename : '[name].bundle.js' // name会自动替换文件名为入口的属性名 } } 复制代码
module.exports = { module: { rules : [{ test : /.(png|jpg|gif)$/i, //要匹配的文件 use : [{ loader : 'url-loader', //使用的规则 options : { limit:8192 //文件大小限制 } }] }] } }; 复制代码
module :{ rules:[ //这个是url-loader { test:/.(png|jpg|gif)$/i, use:[ { loader:'url-loader', options:{ limit:8192 } } ] }, //这个是babel-loader { test:/.m?js$/, //检测将要匹配的文件 exclude: /(node_modules|bower_components)/, //要排除的文件 use:{ //使用了什么loader loader : 'babel-loader', options:{ presets:['@babel/preset-env'] //使用什么规则 } } } ] } 复制代码
module.exports = { module: { rules : [ // sass { test: /.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, ] } }; 复制代码
const webpack = require('webpack'); // 用于引用webpack内置插件 const htmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件 module.exports = { plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({template: './input.html'}) ] }; 复制代码
plugins:[ new MiniCssExtracPlugin({ filename:'[name].css', //name 为 entry里的名字 不是必须设置 chunkFilename: '[id].css' //不是必须设置 }) ] //要使用这个的时候,要在sass-loader中的use里在配置一下,将style-loader换成这个MiniCssExtracPlugin.loader 复制代码
- definePlugin允许创建可以配置的全局常量 new webpack.DefinePlugin([ 'service_url' : josn.stringify('http://www.baidu.com') // service_url 为变量,这样即使改变访问的地址,也可以通过变量来控制 ]) 复制代码
1. 系统默认生成的: plugins: [ new HtmlWebpackPlugin() // 这样就能执行了-> 就会生成index.html文件,并且会自动帮我们引入js和css文件 ] 2. 我们自定义的 new HtmlWebpackPlugin({ title: 'My App', //html的title filename: 'indexa.html' //生成的文件名字 template: 'template.html' //自己的输入文件的内容——在创建一个template.html文件 //就可以在template.html文件里定义title —— 在title标签里输入<%= htmlWebpackPlugin.options.title %> //同样也可在此文件里引用script 或 其他不需要打包的div }) //之后我们indexa.html里,就会出现template.html文件里定义的东西 复制代码
module.exports = { //... devServer: { contentBase: path.join(__dirname, 'dist'), //在哪个目录下启动该插件 ,并且此dist要与上面的output 相一致 compress: true, //是否压缩 port: 9000 // 启动的端口 // hot: true // 热替换 不写也是热替换 现在写true有可能报错,所以还是别写了吧 } }; 复制代码
作者:Honer
链接:https://juejin.im/post/5da898376fb9a04dea5df587
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。