Webpack4.x's use history

The first contact of the Webpack is in a 3.x of data in the application of 4.x encountered a lot of pits, I will be small white identity to use the process of webpaxk me to share, many of them welcome the big boys to correct

Node installation no longer repeat

A Installation

1. NPM I webpack–d (installed in project) "Webpack": "^4.16.5"
2. NPM install Webpack-cli–g 4.x to be installed separately
3. Webpack--mode Development will automatically generate a Dist folder and generate Main.js store the packaged JS file below.

Note: Index.js to be in the SRC folder in Webpack by default from the SRC folder, no longer support Webpack a.js b.js This way (packaged portal file Yes ‘./src/index.js‘ , output path is ‘./dist/main.js‘ )

Two Initialization

NPM Init–y (performs the default configuration)-----generates a Package.json file.

Three. Installing loader

*css:css-loader, Css-loader;

*css in the Url:url-loader (use: ' url-loader?limit=?? (number of bytes in picture size), File-loader;

* Font icon: {test:/\. ( TTF|EOT|SVG|WOFF|WOFF2) $/, use: "Url-loader"},

Advanced syntax conversions in *ES6:
1. Install Loader:
(1) npm i babel-core babel-loader babel-plugin-transform-runtime-d
(2) NPM i babel-preset-env babel-preset-stage-0-D
2. Configure Webpack

{test:/\.js$/, use: "Babel-loader", exclude:/node_modules/}

3. Configure BABELRC
Create a new. babelrc file under SRC and set

{"presets": ["env", "stage-0"],"plugins": ["Transform-runtime"]}

Four. Use of Webpack in Vue

1. Install Vue's Package NPM i vue-s

2.loader NPM i vue-loader vue-template-compiler-d

3. Create a new Vue file and introduce
Import vue from ' Vue '; By default, the Vue file configured in Vue/joson is not fully needed for Rende

Import login from './login.vue 'function  (createelement) {return  createelement (Login)}// directly overwrites a component named login in the mounted element  shorthand render:  c=>c (login)

Five. Configuration of the Webpack.config.js

Const WEBPACK = require ("Webpack"); Const Htmlwebpackplugin= Require (' Html-webpack-plugin '); Const path= Require ("path"); Const Vueloaderplugin= Require (' Vue-loader/lib/plugin '); Const Cleanwebpackplugin= Require (' Clean-webpack-plugin '); Module.exports={mode:' Development ', entry: {index:"./src/index.js", Hw9:"./src/hw9.js"}, Output: {filename:"Js/[name]-[hash].js", Path:path.join (__dirname,"Dist")}, module: {//process the corresponding modulerules: [{test:/\.css$/, use: [' Style-loader ', ' Css-loader ',]//working with CSS}, {test:/\.js$/, use: "Babel-loader", exclude:/node_modules/},//ES6{test:/\. (JPG|PNG|GIF|BMP|JPEG|WEBP|DPG) $/, use: "url-loader?limit=1079"}, {test:/\. (TTF|EOT|SVG|WOFF|WOFF2) $/, use: "Url-loader"}, {test:/\.js$/, use: "Babel-loader", exclude:/node_modules/}, {test:/\.vue$/, use: "Vue-loader"}]}, plugins: [NewWebpack. Hotmodulereplacementplugin (),NewVueloaderplugin (),NewHtmlwebpackplugin ({//Also generate a test.htmlFileName: ' index.html ', chunks: [' Index '], Template:' Src/index.html '        }),        NewHtmlwebpackplugin ({//Also generate a test.htmlFileName: ' hw9.html ', chunks: [' Hw9 '], Template:' Src/hw9.html '        }),       NewCleanwebpackplugin ([' dist/!* ', ' dist/!* ',],//matching deleted files{root: __dirname,//root directoryVerbosetrue,//turn on console output informationDryfalse         　　　　　　　　　　 //Enable Delete files})], Devserver: {//configure this static file server, which can be used to preview the post-packaged projectInlinetrue,//Add a WebSocket client after packagingHottrue,//Hot LoadContentBase:path.resolve (__dirname, ' dist '),//file root directory for development services runtimeHost: ' localhost ',//Host Addressport:8080,//Port numberCompresstrue//whether the development server initiates compression such as Gzip    },};

Six. For further details, please refer to Webpack official documentation

Https://webpack.github.io

Https://www.webpackjs.com

Webpack4.x's use history