大家好，又见面了，我是全栈君。
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！！！
使用教程（二）— module.loaders
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/107847.html原文链接：https://javaforall.net
