[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

阅读 3.2k

求索之路漫漫
这里分享技术的个人心得,总有一遍适合你。没有?那下次来会有得了。写的每一篇文章,都是很用心的!希...

黑夜給了我黑色的眼睛,我卻用來尋找光明。

530 声望
25 粉丝
0 条评论

黑夜給了我黑色的眼睛,我卻用來尋找光明。

530 声望
25 粉丝
宣传栏