Webpack是什么,我就不过多介绍了,大家都有耳闻,不过还是配张图让大家体会下。
我的webpack版本是 3.10.0
- 安装Webpack可以全局安装和局部安装。局部安装的话就最好在安装的当前目录下运行,你硬要在在外部用webpack?那你在命令行要输入安装webpack位置的路径了。
npm install --save webpack // 这是局部安装
./node_modules/.bin/webpack --help // 局部安装的使用要带路径
哇,要写路径,好麻烦哦,没事,那就全局安装吧。
npm install -g webpack
现在用webpack一般都写好配置文件的了,webpack.config.js
,那么接下来就说这个配置文件主要怎样写。
module.exports = {
devtool: '#eval-source-map', // 这个是打包的方式
entry: './main.js', // 入口文件。支持数组形式,将加载数组中的所有模块,但以最后一个模块作为输出,对象形式也一样。
output: {
path: './js', // 打包后的文件存放位置
publicPath: '/dist/', // 这个下面详说
filename: 'build.js' // 打包后的文件名
},
resolve: { // 查找module的话从这里开始查找,下面详说。
root: 'D:/webpack-test/src',
extensions: ['.js', '.json', '.scss'],
alias: {
// 下面有例子。
}
}
};
devtool:打包方式。(官网的文档)
devtool选项 | 打包速度 | 重建速度 | 是否支持生产模式 |
---|---|---|---|
source-map | - | - | 支持 |
eval-source-map | - | + | 不支持 |
cheap-module-source-map | 0 | - | 支持 |
cheap-module-eval-source-map | 0 | ++ | 不支持 |
cheap-source-map | + | 0 | 支持 |
cheap-eval-source-map | + | ++ | 不支持 |
eval | +++ | +++ | 不支持 |
从上到下,打包速度越来越快,开发环境一般用eval-source-map
,生产环境自行斟酌咯。毕竟打包越快,打包质量也就越差。还有,不知大家发现没,带eval
都不支持生产模式哦。
publicPath (官网的文档)
它被用来更新内嵌到css、html文件里的url值。
上面 publicPath: '/dist/'
,例如:
background-image:url('./test.png) // 路径变为'/dist/.test.png'
path: '/js' // 上面打包后的文件位置,那么路径变为'/dist/js/build.js'
pubilcPath很重要。在生产模式下如“test.png”文件可能会定位到CDN上并且你的Node.js服务器可能是运行在HeroKu(一个支持多种编程语言的云平台)上边的。一张图片,手动修改下咯,那如果你网站有上百张呢,那publicPath:'你服务器的ip地址'
,这样省事很多吧。
resolve (官网的文档)
- root:包含您的模块的目录(绝对路径)。
- extensions: 加载模块时可忽略的扩展名。
-
alias:模块别名定义。举些例子:
'Abc': '/js/x/y/z/abc.js' // require('Abc'); 相当于 require('/js/x/y/z/abc.js') // 如果 require('Abc/index.js'), 这样不行的。 'Abc': './js/x/y/z/abc.js' // 如果该值是一个相对路径,它将相对于包含require的文件。 // 例如:在test.js中require('Abc'), 那么test.js和abc.js要在同目录下的。 'Abc': '/js/store' // require('Abc') 就相当于 require('/js/store/index.js') // require('Abc/other.js') 就相当于 require('/js/store/other.js') 'Abc$': '/js/store' // require('Abc') 就相当于 require('/js/store/index.js') // 后面带有 $ ,意味着要完全匹配 'Abc' // 如果 require('Abc/other.js'),因为没完全匹配Abc,那么加载的是 node_modules下Abc文件夹里的other.js!!!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。