Automated build Tools Webpack

Webpack Chinese Document: https://www.webpackjs.com/what is Webpack?

Webpack is a module wrapper. The main goal of Webpack is to package the JavaScript files together, and the packaged files are used in the browser, but it is also capable of converting (transform), packaging (bundle), or parcel (package) any resource (resource or Asset).

Installing Webpack

# 全局安装npm install webpack -g# 局部安装npm install webpack --save-dev

Due to the difference between webpack1.x and 3.x versions, after the global installation of Webpack, local installation can avoid version conflicts or inappropriate situations

Webpack Package JS File

    # webpack 原始js文件路径 打包后存放js文件路径    webpack src/js/entry.js dist/js/bundle.js

Configuration file for Webpack Webpack.config.js

const path = require(‘path‘);module.exports = {  // 入口文件  entry: ‘./src/index.js‘,  // 打包后输出的配置块  output: {    // 文件名    filename: ‘bundle.js‘,    // 调用resolve()设置路径    path: path.resolve(__dirname, ‘dist‘)  }};

Once the configuration is complete, you just need to execute to webpack start packing.

Webpack Wrapping CSS Files

(1) Download the corresponding loader loader:

npm install css-loader style-loader --save-devnpm install file-loader url-loader --save-dev

url-loaderis a file-loader high-level package that needs to be file-loader used together.

(2) configuration using:

const path = require(‘path‘);  module.exports = {    entry: ‘./src/index.js‘,    output: {      filename: ‘bundle.js‘,      path: path.resolve(__dirname, ‘dist‘)    },   // 添加模块配置   module: {     // 查找规则     rules: [       {         test: /\.css$/,         // 要加载使用Loader         use: [           ‘style-loader‘,           ‘css-loader‘         ]       }     ]   }  };

Webpack Packaging image files

(1) Download the corresponding loader loader:

npm install --save-dev file-loader

(2) configuration using:

const path = require(‘path‘);  module.exports = {    entry: ‘./src/index.js‘,    output: {      filename: ‘bundle.js‘,      path: path.resolve(__dirname, ‘dist‘)    },    module: {      rules: [        {          test: /\.css$/,          use: [            ‘style-loader‘,            ‘css-loader‘          ]        },       // 添加模块配置项       {         test: /\.(png|svg|jpg|gif)$/,         use: [           ‘file-loader‘         ]       }      ]    }  };

Webpack Thermal Loading Technology

(1) Download the corresponding installation package:

npm install --save-dev webpack-dev-server

(2) configuration using:

  const path = require(‘path‘);  const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);  const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);  module.exports = {    entry: {      app: ‘./src/index.js‘,      print: ‘./src/print.js‘    },   // 添加配置项      devtool: ‘inline-source-map‘,   devServer: {     // 服务器内容目录     contentBase: ‘./dist‘   },    plugins: [      new CleanWebpackPlugin([‘dist‘]),      new HtmlWebpackPlugin({        title: ‘Development‘      })    ],    output: {      filename: ‘[name].bundle.js‘,      path: path.resolve(__dirname, ‘dist‘)    }  };

(3) Add script command:

{    "name": "development",    "version": "1.0.0",    "description": "",    "main": "webpack.config.js",    "scripts": {      "test": "echo \"Error: no test specified\" && exit 1",      "watch": "webpack --watch",      // 配置一个命令名称+     "start": "webpack-dev-server --open",      "build": "webpack"    },    "keywords": [],    "author": "",    "license": "ISC",    "devDependencies": {      "clean-webpack-plugin": "^0.1.16",      "css-loader": "^0.28.4",      "csv-loader": "^2.1.1",      "file-loader": "^0.11.2",      "html-webpack-plugin": "^2.29.0",      "style-loader": "^0.18.2",      "webpack": "^3.0.0",      "xml-loader": "^1.2.1"    }  }

Webpack plug-in usage

var webpack = require(‘webpack‘);// 导入非 webpack 自带默认插件var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);var DashboardPlugin = require(‘webpack-dashboard/plugin‘);// 在配置中添加插件plugins: [  // 构建优化插件  new webpack.optimize.CommonsChunkPlugin({    name: ‘vendor‘,    filename: ‘vendor-[hash].min.js‘,  }),  new webpack.optimize.UglifyJsPlugin({    compress: {      warnings: false,      drop_console: false,    }  }),  new ExtractTextPlugin({    filename: ‘build.min.css‘,    allChunks: true,  }),  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),  // 编译时(compile time)插件  new webpack.DefinePlugin({    ‘process.env.NODE_ENV‘: ‘"production"‘,  }),  // webpack-dev-server 强化插件  new DashboardPlugin(),  new webpack.HotModuleReplacementPlugin(),]

Automated build Tools Webpack