webpack打包js，json，webpack打包css、less、sass、scss

git地址：https://github.com/OnionMister/webpack-demo.git

一、webpack打包js和son

通过运行指令的方式：
1.开发环境

webpack ./src/index.js -o ./build/built.js --mode=development
// 翻译：webpack 会以 ./src/index.js 为入口文件进行打包，打包输出到./build/built.js的main.js文件中，打包环境为开发环境

2.生产环境

webpack ./src/index.js -o ./build/built.js --mode=production// 翻译：webpack 会以 ./src/index.js 为入口文件进行打包，打包输出到./build/built.js中，打包环境为生产环境

二、webpack打包css、less、sass、scss

1.打包css、less、sass、scss（以css为例）
1）初始化package.json并创建这样的目录结构

npm init -y

2）在根目录下 安装webpack和webpack-cli

npm -i webpack webpack-cli -D

3）在根目录下 安装css-loader和style-loader用于将css转译成webpack能识别的代码

npm -i css-loader style-loader -D

4）这里将index.js文件作为入口文件，文件内js代码如下：

/*
  webpack.config.js  webpack的配置文件
    作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

    所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/

// path下的resolve用来拼接绝对路径的方法
const path = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出的文件路径。path用来处理路径绝对，__dirname是nodejs的变量，代表当前文件的目录绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 输出的文件名
    filename: 'built.js'
  },
  // loader的配置
  module: {
    rules: [
      // 详细loader配置
      // 不同文件必须配置不同loader处理
      {
        // 匹配哪些文件
        test: /\.css$/,
        // 使用哪些loader进行处理
        use: [
          // use数组中loader执行顺序：从右到左，从下到上 依次执行
          // 创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件
          // 需要下载 less-loader和less
          'less-loader'
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          "style-loader",
          "css-loader",
          // sass-loader将sass译成css文件
          // 需要安装sass 和 sass-loader
          "sass-loader"
        ]
      }
    ]
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

6）打包，在webpack.config.js的根目录下执行命令

webpack

7）验证。在打包后的dist文件下创建html，并引入打包好的built.js。
运行html就可以看到样式的效果，以验证。

扩展

1.对于less文件的打包
应该安装less和less-loader，并在webpack的module中加入less-loader，其实上面的webpack代码中就已经加入了less的打包配置，如果你没注意到，可以再查看一边上面的module中的配置，是否有关于less的配置

2.对于sass和scss的打包
应该安装sass和sass-loader，并在webpack的module中加入sass-loader，上面的代码中也已经涵盖了。