Webapck manual configuration (1)

Webapck manual configuration (1)

I went to an interview a few days ago, but my studies shouldn t be left behind. During the interview, I met the super nice Yunlong (idol). I talked about webpack and realized that I still need to understand the configuration information of webpack, so I learned a little bit. Manual configuration of webpack, but using a relatively new version of node, I don't know if many steps are consistent with webpack2.0, so there must be many shortcomings.

  • beginner level

    • Project initialization, initialize in your project directory

      npm initcopy code
    • Create a new project structure src, inside index.js and module a.js

      //a.js module .exports = ()=> { console .log( 'I am a.js' ) } Copy code
      //index.js const hello = require ( './a.js' ) hello(); Copy code
    • New index.html, used to reference index.js

      <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > This is the entry file </title > </head > < body > < script src = "./src/index.js" > </script > </body > </html > Copy code
    • But now we open the index.html file and find that the browser cannot console what we want, because the browser does not support our require syntax, so our male pig's feet are finally online, webpack protagonist halo, hahaha of course people are very If you don t need a halo, install our webpack and webpack-cli modules.

      npm install webapck webapck-cli -D duplicated code
    • To package the bulid, npx is to find the command from the local node_modules

      npx webpackcopy code
    • The dist folder is added, and the main.js file is generated in it. Now it s ok to quote it again, and the console comes out. It seems that the protagonist s halo is amazing, hahaha

      <!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > This is the entry file </title > </head > < body > < script src = "./dist/main.js" > </script > </body > </html > Copy code
    • Another way to run npx is to add commands to the script of package.json, and now use npm run bulid directly

      "scripts" : { "test" : "echo/"Error: no test specified\" && exit 1" , "build" : "webapck" }, Copy code
  • input Output

    • New webapck.config.js, the default configuration file for webpack

      const path = require ( 'path' ); module .exports = { mode : 'development' , //development mode does not compress code entry : './src / index.js' , //entry file output : { filename : 'pack.js' , path : path.resolve (__dirname, ' . /kkb' ) //Need to use absolute path, need to refer to path The package folder is kkb, and the file name is pack.js } } Copy code
  • Configure webpack-dev-server

    • At present, every time we update, we need to re-run the build, and then open the html is more cumbersome, webpack specially installs a package, webpack-dev-server

    • installation

      npm install webpack-dev-server -D duplicated code
    • Configure package.json

      "scripts" : { "test" : "echo/"Error: no test specified\" && exit 1" , "build" : "webapck" , "dev" : "webpack-dev-server" }, Copy code
    • Configure webapck.config.js, of course 0 configuration is also possible

  • Add hash process after build

    • Hash configuration in the configuration of webapck.config.js

      output:{ filename:'pack.[hash:6].js', } Copy code
  • Auto load html

    • Of course, after we build, the pack.6420d5.js file appears, so the references in our html also need to be changed, so we can t modify it manually every time, so let s configure it again.

    • Create a new public folder and create a new index.html as our template

    • Use html-webpack-plugin and configure webpack-config.js

      npm install html-webpack-plugin -D duplicated code
      const htmlWebapckPlugin = require ( 'html-webpack-plugin' ); plugins: [ new htmlWebapckPlugin({ template : './public / index.html' , //template file filename : 'index.html' //output file name }) ] Copy code
    • Then execute npm run dev and we will modify the a.js browser accordingly. I ran the index.html outside

  • Bale

    • Now npm run build will generate a hashed js and an index.html and reference the hashed js file
  • Support css

    • Everything in webpack is a module, the default requires is js, but css or something is parsed into js, that is not executable, then loader is needed to support the configuration of the module, but note that the order of use is executed from right to left

    • Install css -loader

      npm install css-loader -D duplicated code
    • Configure webpack-config, equal to plugin

      module :{ rules : [ //End with css { test : /.css$/ , use: [ 'style-loader' , 'css-loader' ] //first parse the css, and can not directly execute it in the js file, we need to put the parsed into the style, then we need to install the style-loader } ] } Copy code
    • Install style-loader

      npm install style-loader -D duplicated code
    • Extract css, when we want to extract a css file separately, obviously the above plug-in is not enough to meet the requirements, there must be a solution, otherwise, what is it, mini-css-extract-plugin

      npm install mini-css-extract- plugin -D duplicated code
    • The configuration is configured in the configuration file, and it is finished

      const MiniCssExtractPlugin = require ( 'mini-css-extract-plugin' ) plugins : [ new htmlWebapckPlugin({ template : './public / index.html' , //template file filename : 'index.html' //output file first name }), new MiniCssExtractPlugin({ filename : 'kkb.css' }) ], module :{ rules : [ //End with css { test : /.css$/ , use: [MiniCssExtractPlugin.loader, 'css-loader' ] //Now we don t need to stuff css into style and use MiniCssExtractPlugin.loader after css parsing } ] } Copy code
    • npm run build can see the effect

  • Support css precompilation stylus (less, sass similar)

    • stylus-loader stylus installation is over

      npm install stylus-loader stylus -D duplicated code
    • Let's configure it in the same way

      module :{ rules : [ ...... { test : /.styl$/ , use: [MiniCssExtractPlugin.loader, 'css-loader' , 'stylus-loader' ] } ] } Copy code
  • post-css compatibility css

    • Install postcss-loader and autoprefixer

      npm install postcss-loader autoprefixer -D duplicated code
    • Configure the config file

      module :{ rules : [ //End with css { test : /.css$/ , //use: ['style-loader','css-loader'] use: [ MiniCssExtractPlugin.loader, 'css-loader' , 'postcss-loader' ] }, { test : /.styl$/ , use: [ MiniCssExtractPlugin.loader, 'css-loader' , 'postcss-loader' , 'stylus-loader' ] } ] } Copy code
    • You also need to create a new postcss.config.js in the same directory of vue.config.js to configure postcss

      module .exports = { plugins : [ require ( 'autoprefixer' )] } Copy code
  • ES6: Use the famous babel to convert ES6 to ES5

    • Use babel-loader and @babel/core @babel/preset-env

      npm install babel-loader @babel/core @babel/preset-env -D //babel-loader is a loader that handles js conversion //@babel/core babel core //@babel/preset-env is converted to that level Copy code
    • Configure it

      rules: [ ...... { test : /.js$/ , use: [ { loader : 'babel-loader' , options :{ presets :[ '@babel/preset-env' ] } } ] } ] Copy code
      class Kkb { constructor () { this .name = 'yuhior' } sayHi () { console .log( 'Hello' + this .name) } } const kkb = new Kkb() kkb.sayHi() //Write ES6 copy code
  • image

    • The pictures are used in js, obviously it will not be recognized by npm run dev directly like this.

      import Logo from './img/logo.png' let image = new Image() image.src = Logo document .body.appendChild(image) Copy code
    • Use file-loader, so js, css and background all support pictures

      npm install file-loader -D copy the code
    • Needless to say, you must know, configuration, who wouldn t say hahaha

      rules: [ ...... { test : /\.(png|jpg|gif|jpeg)$/ , use: [ 'file-loader' ] }, ] Copy code
  • The bottom layer: what did npm run build do

    • build First of all, go to the webpack module of modules, there is a bin directory, webpack.js underneath, and an installedClis function inside. Go back and find what we have installed. If webpack-cli is installed, the bin under webpakc-cli will be executed. Directory file, if webapck-command is installed, it will execute this
    • There is a cli.js under webapck-cli which actually executes this