# Bang-webpack

**Repository Path**: xiaoyang915918/Bang-webpack

## Basic Information

- **Project Name**: Bang-webpack
- **Description**: 前端工程师必备webpack练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-11-30
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack 3.6.0 配置

## package.json

```
// scripts.server 利用webpack-dev-server配置的本地服务器 npm run server
// scripts.dev 配置本地打包和自动监控文件打包 npm run dev
// scripts.build 配置上线打包和自动监控文件打包 npm run build
"scripts": {
    "server": "webpack-dev-server --open",
    "dev": "set type=dev&webpack --watch",
    "build": "set type=build&webpack --watch"
  },
"devDependencies": {
    "autoprefixer": "^9.3.1",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "html-withimg-loader": "^0.1.16",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "postcss-loader": "^3.0.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }

```

- 用到的插件

```
// 处理文件路径
const path = require("path")
// node插件，扫描文件用
const glob = require("glob")
const webpack = require("webpack")
// 处理js代码压缩
const uglifyPlugin = require("uglifyjs-webpack-plugin")
// 处理生成HTML文件
const htmlPlugin = require("html-webpack-plugin")
// 分离打包的css
const extractTextPlugin = require("extract-text-webpack-plugin")
// 处理冗余的css
const purifyCssPlugin = require("purifycss-webpack")
// 每次打包时先清除distmulu
const CleanWebpackPlugin = require("clean-webpack-plugin")
// 拷贝文件夹和文件
const copyWebpackPlugin = require("copy-webpack-plugin")

```

## entry 入口文件

```
单文件
entry:{
 name:"./src/index.js"
}
多文件
entry:{
 name1:"./src/index1.js"
 name2:"./src/index2.js"
}

```

## output 出口文件

```
output:{
  // 打包文件存放的路径 用到nodejs模块path
  path:path.resolve(__dirname,"dist"),
  // 文件打包后的文件名
  filename:"[name].js"
}

```

## module 配置文件打包格式

### rules 文件打包规则

```
rules = [
  // 配置打包css
  {
    test:/\.css$/,
    use: extractTextPlugin.extract({
      fallback: "style-loader",
      use: [
        {
          loader: "css-loader",
          options: {
            importLoaders: 1
          }
        },
        "postcss-loader"
      ],
      // 解决css背景图的路径问题
      publicPath: "../"
    }),
    // 排除不处理的文件
    exclude: ["node_modules"]
  },
  // 配置打包图片
  {
    test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: "url-loader",
        options: {
          // 设置大小，小于这个值用base64编码，大于这个值，拷贝图片
          limit: 5000,
          // 设置图片打包后存放的文件夹,默认是在dist根目录下
          outputPath: "images/"
        }
      }
    ]
  },
  // 配置HTML文件里面的img标签引入的图片打包
  {
    test: /\.(htm|html)$/i,
    use: ["html-withimg-loader"]
  },
  // 配置打包less文件
  {
    test: /\.less$/,
    use: extractTextPlugin.extract({
      fallback: "style-loader",
      use: [{ loader: "css-loader" }, { loader: "less-loader" }]
    })
  },
  // 配置打包scss文件
  {
    test: /\.scss$/,
    use: extractTextPlugin.extract({
      fallback: "style-loader",
      use: [{ loader: "css-loader" }, { loader: "sass-loader" }]
    })
  },
  // 利用babel配置js和jsx文件
  {
    test: /\.(jsx|js)$/,
    use: {
      loader: "babel-loader"
    },
    exclude: /node_modules/
  }
]

```

## plugins 插件，用于生产模版和各项功能

```
plugins: [
    // 每次执行打包时清除dist目录，然后再打包
    new CleanWebpackPlugin(["./dist"]),
    // 压缩js代码
    new uglifyPlugin(),
    // 压缩html
    new htmlPlugin({
      // 设置要压缩的项目
      minify: {
        // 压缩压缩标签属性值之间的引号
        removeAttributeQuotes: true
      },
      // 禁止缓存
      hash: true,
      // 处理的html文件模板
      template: "./src/index.html"
    }),
    // 分离css文件，参数为css文件打包后存放的目录和文件名
    new extractTextPlugin("css/index.css"),
    // 处理冗余的css，检索项目里面html文件的css标签，去除没有使用到的css类
    new PruifyCSSPlugin({
      paths: glob.sync(path.join(__dirname, "src/*.html")) //src下所有的html
    }),
    // 去重和分离公共依赖
    new webpack.optimize.CommonsChunkPlugin({
      name: ["jquery", "vue"], // 指定公共 类库 的名称。
      filename: "assets/js/[name].js", // 公共类库存放的地址
      minChunks: 2
    }),
    // 丑化js代码
    new webpack.optimize.UglifyJsPlugin(),
    // 打包第三方库
    new webpack.ProvidePlugin({
      $: "jquery"
    }),
    // 配置js文件头部注释
    new webpack.BannerPlugin({
      banner: "bang-webpack配置",
      raw: false,
      entryOnly: true
    }),
    // 配置处理需要拷贝的文件夹和文件
    new copyWebpackPlugin([
      {
        from: __dirname + "/src/public",
        to: "./public"
      }
    ]),
    // 配置处理热更新
    new webpack.HotModuleReplacementPlugin()
  ]

```

## devServer 生产环境服务器配置,热更新

```
devServer: {
    // 服务器加载的文件入口
    contentBase: path.resolve(__dirname, "dist"),
    // 配置服务器地址
    // host: "192.168.2.215",
    host: "localhost",
    // 是否压缩
    compress: true,
    // 端口号
    port: 1717
  }

```

## devtool 代码调试

`只应该在开发模式下配置，在生产模式下应该去掉此项`

#### 开发环境

- eval 生成后的代码，模块没有分离，打包速度很快
- cheap-eval-source-map 转换过的代码，模块分离，打包速度比较快，错误信息只显示行
- cheap-module-eval-source-map 显示原始代码，模块分离，错误信息位置只显示行，打包速度中等
- eval-source-map 显示原始代码，模块分离，错误信息包括行和列，打包速度慢

#### 生产环境

`生产环境下建议省略devtool选项`

- source-map 显示原始代码，单独的文件生成，不安全，在浏览器开发工具中能看到源代码详细，打包速度慢
- hidden-source-map 和 source-map 相似，但是不会暴露在浏览器开发工具中，只会显示错误报告信息，打包速度慢
- cheap-source-map 转换过的代码，打包速度比较快，错误信息值显示行
- cheap-module-source-map 显示原始代码，打包速度中等，错误信息只显示行

## watchOptions 配置监控文件变化自动打包

```
watchOptions: {
    // 每秒检查一次变动
    poll: 1000,
    // 添加打包时的延迟，防止连续保存，连续打包
    aggregeateTimeout: 500,
    // 排除需要监控的文件
    ignorde: /node_modules/
  }

```