[Webpack并不难]使用教程（一）--- entry，devtool，output，resolve

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 （官网的文档）

1. root：包含您的模块的目录（绝对路径）。
2. extensions： 加载模块时可忽略的扩展名。

3. 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