首先:cmd进入项目目录,npm初始化(npm init)→cnpm | webpack -dev-server
安装完成后,新建webpack.config.js,这是webpack默认读取的配置文件。
首先要引进path
var path=require(‘path’);
因为有两个模块,入口文件要分别来写
entry:{
admin:'./admin/index.js',
consumer:'./consumer/index.js'
},
出口文件
output:{
//将打包后的文件放到dist目录
path:path.resolve(__dirname,'dist'),
// 让dist目录成为公共目录,在页面中可以script引用
publicPath:'/dist',
// [name]属性会读取entry里面的模块名,这样在dist中就会有两个打包好的文件
filename: '[name].bundle.js'
}
打包之后,发现bundle.js中有大量注释代码,占内存,怎么办?
去官网查找相应版本文档修改Webpack.config.js
如下:
重新启动webpack,发现报错了。之后,我通过翻看官方文档发现是版本的问题,我看的是3版本的教程,项目中跑的是4.29.6版本,然后我进行了修改:
首先,安装uglifyjs-webpack-plugin:
$ npm install uglifyjs-webpack-plugin –save-dev
然后将插件添加到webpack配置中。例如:
webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
};
然后重新运行webpack,已经成功压缩了。
到这里webpack基础的配置已经完成了。
Webpack要识别css和图像等等,要安装对应的加载器。
以css为例:
1.npm install –save-dev css-loader
2.npm install –save-dev style-loader
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: ['style-loader','css-loader']
}]
},};
这样就可以打包css了。
小贴士:
图片→file-loader
Sass→sass-loader
Es6→babel-loader
Css→css-loader
Style→style-loader
url→url-loader(将图像变为base64编码)
node→node-argv
参数:
① Exclude:可以将打包工作限制在某个模块中,优化打包速度(放在rules中)
② NoParse:对某个模块不进行打包
Ex:noParse:[/iquery/];
有三种使用加载器的方法:
1、配置(推荐):在webpack.config.js文件中指定它们。
2、内联:在每个import语句中明确指定它们。
3、CLI:在shell命令中指定它们。
参考文档:
额 本文暂时没人评论 来添加一个吧
发表评论