webpack学习总结

webpack安装

安装webpack
- npm i webpack -g
- webpack --version验证
package.json
- 工程文件(需要依赖的模块、库描述、作者、版本…)
- npm init生成package.json
安装本地webpack
- npm i webpack -D

webpack 第一个demo

index.html 页面

<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>

entry.js 入口文件

1 2	var app = document.getElementById('app'); app.innerHTML = '<h3>welcome webpack</h3>';

在终端运行: webpack entry.js bundle.js

关于webpack

自动解决依赖:

默认支持commonJs规范

webpack默认支持javascript，如果加载css或者其他，则需要使用加载器–loader

新建style.css
1
2
3
body {
background: sandybrown;
}

在entry.js中添加`require(‘./style.css’)

1
2
3

var app = document.getElementById('app');
app.innerHTML = '<h3>welcome webpack</h3>';
require('./style.css');

npm下载style-loader和css-loader
1
npm i style-loader css-loader -D

修改entry.js，添加loader

1
2
3

var app = document.getElementById('app');
app.innerHTML = '<h3>welcome webpack</h3>';
require('style-loader!css-loader!./style.css');

配置webpack.config.js

作用:配置webpack需要的入口、出口、loader

module.exports = {
    entry: './entry.js', //入口文件
    output: {
        filename: 'bundle.js' //出口文件
    },
    devtool: 'source-map' //开启source maps
    module: {
        loaders: [
            {test: /\.css/, loader: 'style-loader!css-loader'}
        ]
    }
};
// 然后在终端执行`webpack`

webpack: 开发环境下编译(打包)
webpack -p: 生产环境下编译(压缩)
webpack -w: 监听文件改动，自动编译(速度快)
webpack -d: 开启source maps

加载babel来使用ES6

需要用到的模块
- babel-loader
- babel-core
- babel-preset-es2015

然后修改webpack.config.js

module: {
    loaders: [
        {test: /\.css/, loader: 'style-loader!css-loader'},
        {test: /\.js/, loader: 'babel-loader', exclude: /node_modules/}
    ]
}

在终端中输入touch .babelrc新建.babelrc文件，然后输入如下：
1
2
3
{
"presets": ['es2015']
}

然后就可以使用ES6语法了。

webpack-dev-serser

安装命令环境:
1
npm i webpack-dev-server -g
- 然后在终端执行: webpack-dev-server
- 改变端口: webpack-dev-server --port 8088
- 自动刷新浏览器: webpack-dev-server --inline
- 热重载(局部重载): webpack-dev-server --hot
在webpack.config.js中配置在module.exports中添加代码
1
2
3
4
devServer: {
port: 8088,
inline: true
},
这样就不用在终端输入: --port --inline
也可以把运行的命令放到package.json(推荐)
1
2
3
"scripts": {
"dev": "webpack-dev-server --port 8088 --inline --hot"
},
然后再终端执行: npm run dev
resolve: 配置，省略引入文件名后缀
在webpack.config.js中添加
1
2
3
resolve: {
"extensions": ['.js', '.css', '.json', '.jsx']
}

使用webpack插件压缩代码

compression-webpack-plugin:该插件能够将资源文件压缩为.gz文件，并且根据客户端的需求按需加载。
dedupeplugin:抽取出输出包体中的相同或者近似的文件或者代码，可能对于 Entry Chunk 有所负担，不过能有效地减少包体大小。
uglifyjsplugin:压缩输出块的大小，可以参考官方文档。
ignoreplugin:用于忽略引入模块中并不需要的内容，譬如当我们引入moment.js时，我们并不需要引入该库中所有的区域设置，因此可以利用该插件忽略不必要的代码。

plugins: [
   new webpack.DefinePlugin({
     'process.env.NODE_ENV': '"production"'
   }),
   new webpack.optimize.DedupePlugin(),
   new webpack.optimize.UglifyJsPlugin({
     mangle: true,
     compress: {
       warnings: false, // Suppress uglification warnings
       pure_getters: true,
       unsafe: true,
       unsafe_comps: true,
       screw_ie8: true
     },
     output: {
       comments: false,
     },
     exclude: [/\.min\.js$/gi] // skip pre-minified libs
   }),
   new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
   new webpack.NoErrorsPlugin(),
   new CompressionPlugin({
     asset: "[path].gz[query]",
     algorithm: "gzip",
     test: /\.js$|\.css$|\.html$/,
     threshold: 10240,
     minRatio: 0
   })
 ]

Zia Yang

About

webpack安装

webpack 第一个demo

关于webpack

配置webpack.config.js

加载babel来使用ES6

webpack-dev-serser

使用webpack插件压缩代码