初次使用webpack & sass-loader & babel-loader & postcss-loader

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

需要安装webpack、sass-loader(将scss翻译成css)、babel-loader(将ES5语法转成ES6，适配IE)、postcss-loader(css自动加上前缀)等。

一、安装webpack

搜索关键字：webpack github
找到资源

webpack github

点击链接webpack进入

1. 安装

使用npm：

npm install --save-dev webpack

或者是yarn：

yarn add webpack --dev

2. 找到Get Start

Get Start

点击Get Start进入操作。

新建一个文件夹，进入文件夹，npm init 创建一个合法的package.json文件，再安装webpack和webpack-cli。

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

确保你有一个这样目录的项目

project

src/index.js：

function component() {
  const element = document.createElement('div');
  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

index.html：

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

以上就安装好了webpack，详细的配置可以看链接。
如果后期运行npx webpack时，要你安装webpack-cli，那就按照它说的安装，用yarn比其他的要快很多：yarn add -D webpack-cli。
【注意：如果你安装的是webpack4】
出现如下报错：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for thisvalue. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

原因是没有指定mode 导致的 .
解决方法：

package.json中设置：

"scripts":  {
    "dev": "webpack --mode development",  // 开发环境
     "build": "webpack --mode production",  // 生产环境
  }

webpack.config.js中设置：

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    mode: 'development' // 设置mode
}

二、安装sass-loader

搜索关键字： webpack sass github
找到资源：

sass-loader

点击链接sass-loader进入，找到Getting Started。

安装sass-loader

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

在app.js中引入scss文件

import './style.scss';

style.scss的内容为：

$body-color: red;
body {
  color: $body-color;
}

在项目根目录创建一个webpack.config.js文件
内容为：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

如果项目中已经存在这个文件，那就直接添加代码就行了。

此时已经安装好了sass-loader，用npx webpack验证安装是否完成，系统会提示安装style-loader和css-loader，那就使用命令npm install style-loader和npm install css-loader（yarn add style-loader也是一样的）就可以了。

三、安装babel-loader

搜索关键字： webpack babel-loader github
找到资源：

babel-loader

点击链接babel-loader进入。

【需要注意这句话】

版本更新节点出现的问题

如果你的webpack版本是4.x，那么你就直接按照接下来的提示走，如果你的webpack版本是3.x，那么你就点击链接7.x branch。最新安装的版本基本都是4.x，我的webpack版本也是4.x的，所以以4.x版本为例。
安装babel-loader
首先写的很清楚，关于版本。

webpack 1.x | babel-loader <= 6.x
webpack 2.x | babel-loader >= 7.x (recommended) (^6.2.10 will also work, but with deprecation warnings)
webpack 3.x | babel-loader >= 7.1

如果你是以上三种情况的话，那么可以使用yarn或者是npm安装。

yarn add babel-loader babel-core babel-preset-env webpack --dev

npm install --save-dev babel-loader babel-core babel-preset-env webpack

找到Usage，开始使用。新建或者直接添加在webpack.config.js文件中。

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

就可以使用了，用npx webpack验证安装是否完成，如果出现报错说什么文件找不到，那么我们就npm install它。

四、安装postcss-loader

自动加前缀功能，本来是叫做autoprefixer，那么搜索关键字： webpack autoprefixer github
出现资源

autoprefixer-loader

点击链接autoprefixer进入。
【重点注意】

autoprefixer已弃用

表示autoprefixer已经弃用，那么我们根据提示，采用postcss-loder。
点击链接postcss-loader进入操作。

安装postcss-loader

npm install --save-dev postcss-loader postcss

有两种使用方式

第一种：新建webpack.config.js文件或者直接添加
内容：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  'postcss-preset-env',
                  {
                    // Options
                  },
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

第二种，新建一个postcss.config.js文件
内容为：

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        // Options
      },
    ],
  ],
};

webpack.config.js中添加

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
};

就可以使用了，用npx webpack验证安装是否完成，如果出现报错说什么文件找不到，那么我们就npm install它。