Webpackの基礎知識のノート
4005 ワード
/***
* webpack
* 1. ： js css ，html
* ： ， ， （4.0）， ， ， ，
* 2.
* npm init -y
* npm i webpack webpack-cli -D
* 3. webpack.config.js
* ./src
* ./dist //
* 4.
* entry
*
* :'index.js',['index.js','base.js'],{index:'./src/index.js',base:'./src/base.js'}
* output
*
* path: ， ./dist
* filename: ， [name][hash:8].js ，
* module
*
* loader
* css-loader style-loader loader css
* npm i css-loader style-loader -D
* ：
* loader
* use test:/^jquery$/,expose-loader?$
* loader test:/^jquery$/,expose-loader?$
* use+loader use:{loader:'expose-loader' //require.resolve('jquery')
* , options:'$'}
*
* plugin
*
* 1. html-webpack-plugin html
* new HtmlWebpackPligin({
* template:'./src/index.html' //
* filename:'index.html' //
* hash:true // hash
* minify:{
* removeAttributeQuotes:true
* },
* chunk:['index'] //
* title:'hello world'
* //mdzz,
* })
* 2. clean-webpack-plugin //
* new CleanWebpackPlugin([path.join(__dirname,'dist')])
* 3. new webpack.ProvidePlugin({ //
$ : 'jquery'
})
4.
let $ = require('expose-loader?!:jquery') expose
， ， 。 window
loader
require('style-loader!css-loader!./index.css')
? !
*/
const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry : {
index:'./src/index.js',
base :'./src/base.js'
},
output:{
path:path.join(__dirname,'dist'),
filename:"[name][hash].js"
},
module:{
rules:[
{test:/\.css$/,
loader:['style-loader','css-loader']}
]
},
plugins:[
new webpack.ProvidePlugin({
$ : 'jquery'
}),
new CleanWebpackPlugin([path.join(__dirname,'dist')]),
new HtmlWebpackPlugin({
template:'./src/index.html',
hash:true,
filename:'index.html',
// minify:{
// removeAttributeQuotes:true
// },
chunk:['index']
title:'hello world'
//mdzz,<title/>
})
new HtmlWebpackPlugin({
template:'./src/base.html',
hash:true,
filename:'base.html',
minify:{
removeAttributeQuotes:true
},
chunk:['base']
title:'hello world'
//mdzz,<title/>
})
],
devServer:{
devServer:{
contentBase:'./dist', //
host:'localhost' ,//
port:8092, // 8080
compress:false,// gzip
}
}
/**
* "scripts": {
"build": "webpack-dev-server --open --mode development",
"dev": "webpack-dev-server --open --mode development"
},
*/
}
</code></pre>
</div>
</div>
</div>
</div>