Webpack(三)上一篇博客我们分别用loader和plugin处理了 import/require 语句里的css文

写在前面

上一篇博客我们分别用loader和plugin处理了 import/require 语句里的css文件，两者各有优点，这次我们就比较一下有什么区别。

十二、loader和plugin

loader专注于转化文件方面，而plugin不局限于资源的加载

Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。

Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

十三、引入sass、less、stylus

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

npm install sass-loader node-sass webpack --save-dev

安装loader

通过将 style-loader 和 css-loader 与 sass-loader 链式调用，可以立刻将样式作用在 DOM 元素。

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 js字符串 commonjs模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
          options: {implementation:require("dart-sass")}  //使用dart-sass
      }]
    }]
  }
};

剩下的区别不大，loader不同而已

十四、引入图片

我们的图片放在src目录下，但是我们开服务器的根目录却是dist目录，这就会导致图片404

npm install --save-dev file-loader

安装file-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  }
}

默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名，生成文件 file.png，输出到输出目录并返回 public URL。

返回的是url

outputPath为你的文件配置自定义 output 输出目录

十五、部署

创建两个分支一个是源码分支，一个是发布分支

master分支: 增加.gitignore文件，忽略dist目录和node_modules目录

gh-pages分支(发布分支):只留下.gitignore和dist目录和node_modules目录，因为dist目录下有一个网页需要的所有文件，至于为什么不删掉.gitignore和node_modules目录，因为麻烦，最终提交到github上面只有dist目录

由于dist目录在gitignore里面所以每次切换分支dist目录都是最新的

你要是嫌麻烦再master设置一个bash脚本，语句用&&连接即可

npm run build &&
git checkout gh-pages &&
rm -rf  *.html  *.js  *.CSS  *.png &&
mv dist/* ./ &&
rm -rf dist; 
git add . &&
git commit -m 'update' &&
git push &&
git checkout -