安裝指定版本的webpack
npm install webpack@3.6 -g
安裝live-server 運行項目插件 輸入live-server 運行后自動打開網頁
npm install -g live-server
webpack.config.js
module.exports={
//入口文件的配置項
entry:{},
//出口文件的配置項
output:{},
//模塊：例如解讀CSS,圖片如何轉換，壓縮
module:{},
//插件，用於生產模版和各項功能
plugins:[],
//配置webpack開發服務功能
devServer:{}
}
- entry：配置入口文件的地址，可以是單一入口，也可以是多入口。
- output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
- module：配置模塊，主要是解析CSS和圖片轉換壓縮等功能。
- plugins：配置插件，根據你的需要配置不同功能的插件。
- devServer：配置開發服務功能，后期我們會詳細講解。
webpack配置了 熱更新 需要安裝webpack-dev-server
安裝 webpack-dev-server webpack是3.6版本 對應 webpack-dev-server 2.9.4版本
npm install webpack-dev-server@2.9.4 --save-dev
然后修改package.json
css打包
在./src/css/index.css 簡歷index.css文件
body{
background-color:#f00;
color:#fff;
}
在entry.js引入css文件
import css from './css/index.css';
document.getElementById('title').innerHTML='Hello jason';
style-loader:
它是用來處理css文件中的url()等，npm中的網址：https://www.npmjs.com/package/style-loader
用npm install 進行項目安裝：
npm install style-loader --save-dev
css-loader：
它是用來將css插入到頁面的style標簽。npm中的網址：https://www.npmjs.com/package/css-loader
用npm install 進行項目安裝：
npm n install --save-dev css-loader
兩個loader都下載安裝好后，我們就可以配置我們loaders了。
修改webpack.config.js中module屬性中的配置代碼如下：
webpack.config.js
第一種:
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
第二種:
module:{
rules: [
{
test: /\.css$/,
loader: ['style-loader','css-loader']
}
]
},
第三種: 常用方式, 可以擴展
module:{
rules: [
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}]
}
]
},
JS壓縮 (插件配置：配置JS壓縮)
webpack.config.js 引入 uglify.js
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
output:{
path: path.resolve(__dirname, 'dist'),
//filename:'bundle.js'
//[name] 自動匹配js名稱
filename:'[name].js'
},
module:{
rules: [
{
test: /\.css$/,
//use: ['style-loader','css-loader']
//loader: ['style-loader','css-loader']
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}]
}
]
},
plugins:[
new uglify
],
//熱更新 需要安裝 webpack-dev-server2.9.4 對應 webpack3.6版本
//然后修改 package.json
/*
*"scripts": {
* "server": "webpack-dev-server"
*}
*/
devServer:{
//文件地址
contentBase: path.resolve(__dirname, 'dist'),
//IP
host: '174.16.10.160',
//文件壓縮
compress: true,
//端口
port: 8008
}
}
然后webpack 打包 就可以看到js文件壓縮了
Html 打包
1. 先安裝html 打包壓縮插件
介紹網址: https://www.npmjs.com/package/extract-text-webpack-plugin
npm install --save-dev html-webpack-plugin
2. 然后配置webpack.config.js文件, 先引入 html-webpack-plugin插件
const htmlPlugin = request('html-webpack-plugin');
3. 最后插件配置代碼
const path = require('path');
//引入js打包插件
const uglify = require('uglifyjs-webpack-plugin');
//引入html打包插件
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
output:{
path: path.resolve(__dirname, 'dist'),
//filename:'bundle.js'
//[name] 自動匹配js名稱
filename:'[name].js'
},
module:{
rules: [
{
test: /\.css$/,
//use: ['style-loader','css-loader']
//loader: ['style-loader','css-loader']
use: [{
loader: 'style-loader'
},{
loader: 'css-loader'
}]
}
]
},
plugins:[
//new uglify,
new htmlPlugin({
minify: {
removeAttributeQuotes: true
},
hash: true,
template: './src/index.html'
})
],
//熱更新 需要安裝 webpack-dev-server2.9.4 對應 webpack3.6版本
//然后修改 package.json
/*
*"scripts": {
* "server": "webpack-dev-server"
*}
*/
devServer:{
//文件地址
contentBase: path.resolve(__dirname, 'dist'),
//IP
host: '174.16.10.160',
//文件壓縮
compress: true,
//端口
port: 8008
}
}
- minify：是對html文件進行壓縮，removeAttrubuteQuotes是卻掉屬性的雙引號。
- hash：為了開發中js有緩存效果，所以加入hash，這樣可以有效避免緩存JS。
- template：是要打包的html模版路徑和文件名稱。
上邊的都配置完成后，我們就可以在終端中使用webpack，進行打包。你會看到index.html文件已經被打包到我們的dist目錄下了，並且自動為我們引入了路口的JS文件。
總結：
html文件的打包可以有效的區分開發目錄和生產目錄，在webpack的配置中也要搞清楚哪些配置用於生產環境，哪些配置用於開發環境，避免兩種環境的配置沖突。