1 .npm the init package file to create a node 2 .npm WebPACK WebPACK install-cli - G Global is not recommended to install 3 .npx webpakc - node_modules inside npx webpack v view the version number of the current project is to find it, npm is to look at the global 4 .npm info webpack can see all webpack package 5 .npm install webpack @ 4.16 . 6 webpack-cli - D installs the specified version 6 default webpack looking package configuration file is webpack.config.js If you want to change the folder name: npx webpack --config webpack.js (this is the need to change the name of the folder)
commonly used loader plug-webpack.config.js configuration, note that plug-in is from top to bottom, left to right
const path = require('path')
module.exports = {
mode:'development',
entry:'./src/index.js',
module:{
rules:[
{
test:/\.(jpg|png|gif)$/,
use:{
loader:'file-loader',
options:{
name:'[name].[ext]',
outputPath:'images/'
}
}
},
{
test:/\.css$/,
use:['style-loader','css-loader','postcss-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
},
output:{
filename:'bound.js',
path:path.resolve(__dirname,'dist')
}
}
2.postcss-loader is used to add a vendor prefix, you need to install add postcss-config.js npm install autoprefixer configuration file in the root directory -D
postcss-config.js configuration:
module.exports ={
plugins:require('autoprefixer')
}
Results are as follows:
- -webkit-transform: translate(100px,100px);
- transform: translate(100px,100px);