• To optimize front-end engineering, static files are usually compressed to reduce bandwidth usage; Static file merge, reduce HTTP requests, Webpack can easily achieve static file compression merge and packaging functions, in addition, Webpack also supports a number of Loader plug-ins, through the loader plug-in can achieve many types (such as vue, less, JPG, CSS) resource packaging

  • The webpack documentation is quite excellent. For the convenience of readers, the following configuration notes for each category are attached with the reference to the original document address. If the configuration is updated in the future, it is also convenient to view the updated document

  • If you do not want to configure your own, you can directly copy the final configuration document into your own project, all case resources attached at the end of the article, welcome to download and learn

Create a new project start-webpack and initialize NPM

mkdir start-webpack
cd start-webpack
npm init -y
Copy the code
  • After initialization, NPM automatically creates an NPM configuration file

Through NPM, install webPack

npm install -D webpack
# WebPack 4.0 requires an additional webpack- CLI installation
npm install -D webpack-cli
Copy the code
  • Here,-DIndicates that webPack is only used during the development phase, and is not required for the final packaged live project

Manually create the WebPack configuration filewebpack.config.js

configurationpackage.json, custom Webpack packaging commandThe official reference

  • Run the commandnpm run webpack, to package, obtain./dist/bundle.js
npm run webpack
Copy the code

  • Test the packaging effect

Static file packaging (CSS, images for example)

# solve HTML output to dist reference: https://webpack.js.org/guides/output-management/
npm install -D html-webpack-plugin
# increase support for CSS reference: https://webpack.js.org/guides/asset-management/#loading-css
npm install -D style-loader css-loader
# increase support for image reference: https://webpack.js.org/guides/asset-management/#loading-images
npm install -D file-loader
Copy the code

Less escape packaging is supported

# installation less - loader less reference: https://webpack.js.org/loaders/less-loader/
npm install -D less-loader less
Copy the code

Es6 syntax escape is supported

# es6 grammar escape to es5 reference: https://webpack.js.org/loaders/babel-loader/
npm install "Babel - loader @ ^ 8.0.0 - beta" @babel/core @babel/preset-env
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
# use legs on polyfill, es6 API implemented reference: https://babeljs.io/docs/usage/polyfill/
npm install --save babel-polyfill
Copy the code

Loading and using third-party packages (project optimization solution)

# if packaged vue to bundle. The js will increase bundle. The volume of js, so we configure using global third-party packages, reference: https://webpack.js.org/configuration/externals/
npm install -S vue
Copy the code

Support for vue.js packaging

Support vUE single file component loading, see :https://vue-loader.vuejs.org/guide/
npm install -D vue-loader vue-template-compiler
Copy the code

Support automatic packaging, support hot overload

# automatic packing tool reference: https://webpack.js.org/guides/development/
npm install -D webpack-dev-server
# support thermal overload (vue child components can not refresh update data), refer to: https://webpack.js.org/guides/hot-module-replacement/#enabling-hmr
Copy the code

  • Packet sending command:npm install --production
  • According to thepackage.jsonDownloading dependency packagesnpm install

The final webpack.config.js configuration file information:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');

module.exports = {

    // Set the footer, set the js entry
    entry: ['babel-polyfill'.'./src/index.js'].// Use the development server to run the services in the dist directory (virtually in memory)
    // To solve the path problem of third-party packages, we changed './dist' to './'.
    devServer: {
        // Set the location of the virtual directory
        // contentBase: './dist'
        contentBase: path.join(__dirname, ". /"),
        // Automatically compress output files
        compress: true.// Test port is 9000
        port: 9000.// Hot update component
        hot: true
    },
    // Resolve the issue of index.html output to dist
    plugins: [
        new HtmlWebpackPlugin({
            title: "Home page".template: "./page.html"
        }),
        new VueLoaderPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    // Load separately using third-party packages
    externals: {
        jquery: 'jQuery'.vue: 'Vue'
    },
    // Set the js output position
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            // Solve the problem of loading CSS resources
            {
                test: /\.css$/.use: [
                    'style-loader'.'css-loader']},// Solve the problem of loading image resources
            {
                test: /\.(png|svg|jpg|gif)$/.use: [
                    'file-loader']},// Resolve to load less resources
            {
                test: /\.less$/.use: [{
                    loader: 'style-loader' // 3. Insert into the page with js inline style
                }, {
                    loader: 'css-loader' // 2. Convert CSS to JS
                }, {
                    loader: 'less-loader' 1. Compile less to CSS}},// Resolve es6 to ES5
            {
                test: /\.js$/.exclude: /(node_modules|bower_components)/.use: {
                    loader: 'babel-loader'.options: {
                        presets: ['@babel/preset-env'].plugins: ['@babel/plugin-transform-runtime']}}},// Support vUE loading
            {
                test: /\.vue$/.loader: 'vue-loader'}}};Copy the code

The final package. Json

{
  "name": "start-webpack"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "build": "webpack"."start": "webpack-dev-server --open"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": 46 "" ^ 7.0.0 - beta.."@babel/plugin-transform-runtime": 46 "" ^ 7.0.0 - beta.."babel-plugin-transform-runtime": "^ 6.23.0"."css-loader": "^ 0.28.11"."file-loader": "^ 1.1.11"."html-webpack-plugin": "^ 3.2.0"."less": "^ 3.0.2." "."less-loader": "^ 4.1.0." "."style-loader": "^ 0.21.0"."vue-loader": "^ 15.0.0"."vue-template-compiler": "^ 2.5.16"."webpack": "^ 4.6.0"."webpack-cli": "^ 2.0.15"."webpack-dev-server": "^ 3.1.3"
  },
  "dependencies": {
    "@babel/preset-env": 46 "" ^ 7.0.0 - beta.."@babel/runtime": 46 "" ^ 7.0.0 - beta.."babel-loader": 2 "" ^ 8.0.0 - beta.."babel-polyfill": "^ 6.26.0"."babel-runtime": "^ 6.26.0"."vue": "^ 2.5.16"}}Copy the code

Combined with the above configuration, a simple page was written in a vUE componentized manner

Tutorial involves I through baidu network backup resource sharing for everyone, in order to facilitate everyone to download, resource integration to a separate post, link is as follows: http://www.jianshu.com/p/4f28e1ae08b1