webpack4.x Study Notes

Have input must have output, today to output the process of learning webpack.

Have to first spit groove, compared to the lovely grunt and good gulp, to webpack really love not up!

There is a lesson in blood: Do not be lazy, there are problems directly to the official website ...

The purpose of this paper is to record the webpack of learning and the problems encountered, suitable for node and webpack basic knowledge of some developers, not detailed to the record operation command, there are some problems without solution, but also master advice.

First affixed to the build time various packages of the version, after all, webpack each upgrade compatibility is not very good

Operating system: Windows 10;node:v8.9.4

Build steps

1, install Webpack,webpack-cli,webpack-dev-server html-webpack-server (webpack-cli in the 4.x version has been removed, here need to install a bit );

Corresponding configuration:

A, configure the command to start the server in the Package.json scripts.

b, in the webpack.config.js to configure the entrance, export, and server;

For more configuration parameters for the server, refer to https://webpack.js.org/configuration/dev-server/#src/components/sidebar/sidebar.jsx

C, Configuration Html-webpack-plugin, in the compiled folder automatically generated an HTML, and has been added to the compiled entry JS;

After configuration webpack.config.js: (This time we can start the service directly with npm run Dev .) ）

Const WEBPACK = require (' Webpack '); Const path= Require (' path '); Const Htmlwebpackplugin= Require (' Html-webpack-plugin '); Module.exports={entry:{//portal file, where you can configure multiple portalsMain:path.resolve (__dirname, ' src/module/index/main.js ')),        //plugin:path.resolve (__dirname, ' src/plugin/plugin.js ')}, Output: {//file location and filename after packagingPath:path.resolve (__dirname, ' dist ')), FileName:' [Name].js '}, Devserver: {//Server ConfigurationContentBase:path.join (__dirname, "dist"),//the folder that the service points toport:9000,//Port numberInlinetrue,//automatic refresh mode is configured as inlineOpentrue,//whether to open the page automaticallyProxy: {//Agent Configuration"/dist": {target:"http://localhost:3000", Pathrewrite: {"^/api": ""}, Bypass:function(req, res, proxyoptions) {//Agent Filter Function                    return""}}}, plugins: [NewHtmlwebpackplugin ({//Configure source HTML to generate new HTMLTemplate:path.resolve (__dirname, ' src/index.html '))        })     ]}

2, Configuration Loader

A, install JS processing package: Babel-loader Babel-ccore babel-preset-env and configure

Babel-preset-env can compile only those features that are not supported according to the Env configuration, please refer to https://github.com/babel/babel-preset-env for details.

{    /\.js$/, use    : {        ' babel-loader ',        options: {            presets: [' env '],             true // configure allow caching to speed up compilation         }    }}

b, install the CSS processing package node-sass Sass-loader (the code uses the Sass,less configuration as sass, as long as the installation of less corresponding processing plug-in can be)

Install CSS Detach processing plugin extract-webpack-text-plugin, take CSS styles out of HTML pages and put them in a separate file

Sass-loader relies on node-sass, so don't forget to install node-sass here;

First, we introduce Extract-webpack-text-plugin, and new two objects to deal with the CSS and less, respectively, to the save path of the post-processing style:

Const EXTRACTTEXTPLUGIN = require ("Extract-text-webpack-plugin"new extracttextplugin (' css/[name] . css 'new extracttextplugin (' css/[name].css ');

Rules for configuring loader in module:

{    /\.scss$/,    use:extractLess.extract (["Css-loader", "Sass-loader"])},{    / \.css$/,    use:extractCss.extract ({         "Style-loader",          "Css-loader"     })},

Add Extractcss and Extractless plugins in plugins:

plugins: [    new  htmlwebpackplugin ({        template:path.resolve (__dirname,' src/ Index.html ')    }),    extractcss,    extractless]

　　C, IMG, fonts and other files Loader installation configuration Url-loader File-loader

　　　Note: The documentation shows that Url-loader is a loader that supports more configurations based on the File-loader package, but has been tested to find that Url-loader cannot be used alone and requires File-loader to be installed at the same time.

Which classmate if know the reason also please leave a message, first thanks!

{// load Picture loader configuration    test:/\. ( Png|jpg|gif) $/, use        : [        {            ' url-loader ',            options: {              // size limit              }        }    ]},{// load fonts, etc. loader configuration    test:/\. ( EOT|SVG|TTF|WOFF|WOFF2) (\?\s*)? $/,    use:{        ' File-loader '    }}

3, other plug-in configuration

Uglifyjsplugin, this plug-in in the 4.x version, has also been independent, need to install separately to use.

On the opening of the module hot load, there are many implementations in the official documentation, here is a test using the Devserver implementation method:

　　Other implementations details reference https://doc.webpack-china.org/guides/hot-module-replacement

　　Set hot:true in Devserver and add Webpack in plugins. Hotmodulereplacementplugin ();

Test results:

Modify HTML file: The browser HMR the word, but the page does not change:

Modify JS File: The page is completely refreshed after compiling;

When I intend to continue to configure multi-entry multi-page, I actually found that I can only loop call Html-webpack-plugin to generate HTML;

To the current position, webpack give me the feeling is slow compiling, the document is not clear so that strange bug one after another, these feelings are probably because the study is not deep enough, not meticulous.

Finally, post Package.json and Webpack.config.js

{  "Name": "Webpackonly",  "Version": "1.0.0",  "description": "",  "Main": "Index.js",  "Scripts": {    "Test": "Echo \" Error:no test specified\ "&& exit 1",    "Dev": "Webpack-dev-server"  },  "keywords": [],  "Author": "",  "License": "ISC",  "Devdependencies": {    "Babel-core": "^6.26.0",    "Babel-loader": "^7.1.4",    "Babel-preset-env": "^1.6.1",    "Css-loader": "^0.28.11",    "Extract-text-webpack-plugin": "^4.0.0-beta.0",    "File-loader": "^1.1.11",    "Html-webpack-plugin": "^3.2.0",    "Node-sass": "^4.8.3",    "Sass-loader": "^7.0.1",    "Style-loader": "^0.21.0",    "Uglifyjs-webpack-plugin": "^1.2.5",    "Url-loader": "^1.0.1",    "Webpack": "^4.6.0",    "Webpack-cli": "^2.0.15",    "Webpack-dev-server": "^3.1.3"  },  "Dependencies": {    "Element-ui": "^2.3.6"  }}

Const WEBPACK = require (' Webpack '); Const path= Require (' path '); Const Htmlwebpackplugin= Require (' Html-webpack-plugin '); Const Uglifyjsplugin= Require (' Uglifyjs-webpack-plugin '); Const Extracttextplugin= Require ("Extract-text-webpack-plugin"); Const EXTRACTCSS=NewExtracttextplugin (' Css/[name].css '); Const extractless=NewExtracttextplugin (' Css/[name].css '); Module.exports={entry:{//portal file, where you can configure multiple portalsMain:path.resolve (__dirname, ' src/module/index/main.js ')), Plugin:path.resolve (__dirname,' Src/plugin/plugin.js ')}, output: {//file location and filename after packagingPath:path.resolve (__dirname, ' dist ')), FileName:' [Name].js '}, Devserver: {//Server ConfigurationContentBase:path.join (__dirname, "dist"),//the folder that the service points toport:9000,//Port numberInlinetrue,//automatic refresh mode is configured as inlineOpentrue,//whether to open the page automaticallyHottrue, Proxy: {//Agent Configuration"/dist": {target:"http://localhost:3000", Pathrewrite: {"^/api": ""}, Bypass:function(req, res, proxyoptions) {//Agent Filter Function                    return""}}}, plugins: [NewHtmlwebpackplugin ({template:path.resolve (__dirname,' Src/index.html ')        }),        NewUglifyjsplugin ({uglifyoptions: {compress:false            }        }),        NewWebpack. Hotmodulereplacementplugin (),//Hot Load PluginsExtractcss, Extractless], module: {rules: [{test:/\.js$/, use: {loader:' Babel-loader ', Options: {presets: [' Env '], Cachedirectory:true //configure allow caching to speed up compilation}}} , {test:/\.scss$/, Use:extractLess.extract (["Css-loader", "Sass-loader"])                /*use: [{//not using CSS Extraction configuration loader: ' Style-loader '},{loader: ' Css-l Oader '},{loader: ' Sass-loader ', options: {i Ncludepaths: ["src"]}}]*/}, {test:/\.css$/, Use:extractCss.extract ({fallback:"Style-loader", use:"Css-loader"})}, {test:/\. (png|jpg|gif) $/, use: [{loader:' Url-loader ', Options: {limit:8192} }]}, {test:/\. (EOT|SVG|TTF|WOFF|WOFF2) (\?\s*)? $/, use:{loader:' File-loader '                }            }        ]    }}

webpack4.x Study Notes