1. What is webpack
is a front-end resource loading/packaging tool. It will perform static analysis according to the dependencies of modules, and then generate corresponding static resources for these modules according to the specified rules. What it does is, analyze your project structure, find JavaScript modules and other extension languages (Scss, TypeScript, etc.) that browsers cannot run directly, and convert and package them into a suitable format for browsers to use. A variety of static resources js, css, less can be converted into a static file, reducing page requests.
• webpack4.0 installation and environment configuration
Before installing webpack4.0, you need to install node, node comes with npm
npm generally runs very slowly, you can use Taobao mirror npm install -g cnpm --registry=https://registry. npm.taobao.org,
after the npm is changed to cnpm and then run, it is much faster
1. Create a new project and switch to the project directory: mkdir -p tmp/webpack4.0-demo && cd tmp/webpack4.0- demo
2、初始化 npm: npm init -y
There is an extra package.json file under the project
3. Install webpack: $ npm install -D webpack (this is a local installation, if you want to install it globally, change D to g)
cnpm view webpack versions : View all versions of webpack, you can specify the installation version
cnpm install when installing webpack -D
cnpm install webpack-cli -D
4. Check the version of webpack, we will be prompted to install webpack-cli, this is because webpack migrates all command line related items to webpack-cli package in webpack 4
type yes and press Enter, wait for a while, webpack-cli is installed
The problem encountered:
The version 4.6.0 was specified when installing webpack, but it was always 3.8.0 when checking the version, which may be because I installed version 3.8.0 globally before
Solution:
npm -g uninstall webpack : uninstall webpack sudo
npm -gi webpack : install webpack globally
npm install webpack --save-dev
Problems encountered: I keep getting an error saying that webpack-cli cannot be found
Solution: sudo npm install webpack-cli -g
Finally, it is ok. If an error is reported during the reinstallation process, you must add sudo
and then switch to the local installation under the project. In fact, it is also feasible to use the global webpack . It's just that if the project is copied to someone else's computer, there is no guarantee that webpack is a unified version
Create a src folder under the project and create index.js inside, because webpack4.x takes ./src/index.js in the project root directory as the entry, so we need to create a new src directory and put index.js under src
Packaging:
The packaging of webpack4.x can no longer be done in the way of webpack file a and file b, but directly run webpack --mode development or webpack - -mode production, it will be packaged by default, the entry file is './src/index.js', and the output path is './dist/main.js', where the src directory, the index.js file, needs to be created manually, and The dist directory and main.js will be automatically generated
Add "dev" : "webpack --mode development " to package.json, so that you can directly use npm run dev to perform packaging
• Process CSS files
Create a hello.css file in the project root directory, then introduce hello.css into index.js, and package it again, an error will be reported
! [](https://ws1.sinaimg.cn/large/006tNc79ly1fqq9jgy4e5j30kh0cmt8z.jpg)
This is because webpack does not support the css file type, and needs to rely on the loader to
run cnpm install css-loader style-loader --save-dev
css-loader: enable webpack to process css files
style-loader: create a new style tag and process css-loader Put the pasted files in, then insert them into HTML tags,
modify "dev" in package.json: "webpack --mode development --module-bind 'css=style-loader!css-loader'", and then run cnpm run dev , packaged successfully