webpack is a modern JavaScript applications static packer module (Module Bundler) . When webpack processing applications, it recursively construct a dependency graph (dependency Graph) , wherein each module comprises application desired, all of these modules are then packaged into one or more of the bundle .
1. Install webpack
1.1 need to be in the project npm init initialize it to generate package.json
1.2 npm install webpack webpack-cli -D
2.webpack Configuration
Created in the root directory of a webpack.config.js files for configuring some of the webpack, all configuration items will be configured in webpack. Src directory and create a directory. Src directory and then create a index.js files and html files.
Write a div tag in the index.html file
<!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>webpack配置学习</title> </head> <body> <div id="root"></div> </body> </html>
webpack configuration directory
const path = the require ( ' path ' ) module.exports = { MODE: ' Development ' , entry: ' ./src/index.js ' // entry file Output: { // exit path: path.resolve (__ dirname, ' dist ' ), // package directory generated
filename:' index.js' // filename directory generation, file using a single js } }
Multi-pack configuration file, if it is two js files
entry: { main: ' ./src/index.js ' , // entry file Sub: ' ./src/index.js ' },
This time you need to configure the output in the filename
filename: ' [name] .js ' // package when generating a plurality of directory files js
2.1webpack configuration picture
Prepare a picture in my src directory, write in index.js
import avatar from './item.png' var img = new Image() img.src = avatar var root = document.getElementById('root') root.append(img)
Webpack modular configuration (Module1), is first installed, choosing yarn mounted
yarn add url-loader --save-dev
Module1: { the rules: [ { Test: /\.(png|jpg|gif)$/ , use: { Loader: ' URL-Loader ' , Options: { name: ' [name] _ [the hash] [EXT]. ' , // pictures name plus hash value OutputPath: ' ImagesRF Royalty Free / ' , // a directory stored inside after the packed picture limit: 10240 // limit the picture size is set, if more than 10,240 bytes, packaging will generate catalog and pictures, If size is not more than the set, the default will be packaged in compressed base64 in js } } } ] },
In package.json configuration file, each execution npm run dev will be packaged, will generate dist directory in your root directory
"scripts": { "dev": "webpack" },
2.2webapck of CSS ( SCSS ) preprocessor
First need to install the following plug-ins
yarn add css-loader --save-dev yarn add node-sass --save-dev yarn add sass-loader --save-dev yarn add scss-loader --save-dev yarn add style-loader --save-dev
Written in webapck
Module1: { the rules: [ { Test: /\.scss$/ , // css-loader processing document style-loader css css-loader Handled the file header mounted to the label, sass-loader to preprocessor scss configuration, postcss-loader processing css prefix use: [ ' style-Loader ' , { Loader: ' css-Loader ' , Options: {
modules: to true, // modular packaging,
importLoaders: 2 // each load will be performed and sass-loader-Loader postcss } }, ' sass-loader ' , ' postcss-Loader ' browser prefix ] } ] },
If you want to css modular process, you need to configure
Options: { modules: to true , // modular packaging, importLoaders: 2 // each load will be performed and sass-loader-Loader postcss }
Scss create a file in the directory, write some simple css file
body {
.avatar {
width: 50%;
border: 1px solid red;
transform: translate(100px, 100px);
}
}
Written index.js file
import avatar from './item.png'
import style from './index.scss' var img = new Image() img.src = avatar img.classList.add(style.avatar) var root = document.getElementById('root') root.append(img)
Create a js file, and then introduced index.js file,
import avatar from './item.png'
function createdAvatar() {
var img = new Image()
img.src = avatar;
img.classList.add('avatar')
var root = document.getElementById('root');
root.append(img)
}
export default createdAvatar;
After the package can be seen in the browser, there is style, not a
In the above css, we used css3, but the browser does not automatically add a prefix to me, this time, we need to manually configure some.
安装
yarn add postcss-loader --save-dev
Postcss.config.js need to create a file in your root directory,
安装
yarn add autoprefixer --save-dev
use,
= {module.exports
plugins: [
the require ( 'autoprefixer')
]
}
// treated with the prefix automatically css problem in different browsers
Then your css configuration using postcss-loader, run the package, it can be seen again in the browser, for some css3 browser automatically prefixed
2.3webpack对字体进行处理
先行iconfont下载一些字体，放入自己的src目录里面，需要在index.js文件引入并使用
import './iconfont.scss' var root = document.getElementById('root') root.innerHTML = "<div class='iconfont iconchangjingguanli'></div>"
然后需要在webpack进行一些配置，首先安装一个插件
yarn add file-loader --save-dev
使用
module: { rules: [{ test: /\.(eot|ttf|svg)$/, use: { loader: 'file-loader' } } ] },
再次运行npm run dev打包之后，可以在浏览器看到我们的字体图标了
2.4webpack配置html打包文件处理
如果想每次打包之后，dist目录都会给我们生成一个html文件，这时候需要安装一个插件
yarn add html-webpack-plugin --save-dev
然后在webapck.config.js文件中引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
使用 HtmlWebpackPlugin打包之后自动生成html文件，
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
每次打包需要重新更新一下dist目录，删除里面的文件，重新生成一个新的，这时候需要安装另一个插件
yarn add clean-webpack-plugin --save-dev
也是需要在webpack.config.js引入
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
使用和HtmlWebpackPlugin一样
plugins: [
// HtmlWebpackPlugin打包之后自动生成html文件，
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
// CleanWebpackPlugin打包之前先自动清除dist目录里面所有的文件，
new CleanWebpackPlugin()
],
2.5SourceMap配置，用于检测在代码打包之后，检测问题，定位到那个行
module.exports = {
devtool: 'cheap-inline-source-map',
}
配置选项如下
//source-map 打包之后会生成map文件，性能比较慢，用于检测代码打包之后错误信息提示
//eval 打包最快，不会生成.map文件，
//inline-source-map 打包不会生成.map文件，在打包的js文件生成base64
//如果是在development 开发环境 使用cheak-module-eval-source-map,不会生成.map文件，但是集成在打包之后main.js中eval中
//cheap-inline-source-map 打包不会生成.map文件，在打包的js文件生成base64
//如果是在production 线上环境 使用cheak-module-source-map,会打包生成.map文件
webpack配置插件特别多，需要慢慢的来，理解常用的场景配置就可以了。剩下的需要单独查阅资料就可以了解其中配置以及原理