創(chuàng)建工程
npm int
安裝類庫(kù)
npm install webpack@3.5.5 --save-dev
構(gòu)建目錄
//配置文件
Webpack.config.js
//源碼目錄
app
//入口文件
app/index.html
<script type="text/javascript" src="../build/bundle.js"></script>
app/index.js
//…隨便寫寫
編譯試試
node_modules/.bin/webpack
開瀏覽器
//此版本先自己手動(dòng)打開瀏覽器，輸入網(wǎng)址http://localhost:8080/
建服務(wù)器
//安裝類庫(kù)
npm install webpack-dev-server@2.11.2 --save-dev
//配置文件
publicPath: "/assets/",
//修改html
<script type="text/javascript" src="/assets/bundle.js"></script>
//運(yùn)行命令（此時(shí)實(shí)現(xiàn)了自動(dòng)刷新腳本）
node_modules/.bin/webpack-dev-server --content-base app
“自刷內(nèi)容”
//安裝類庫(kù)
npm install --save-dev html-webpack-plugin@3.0.0
//添加配置
var HtmlWebpackPlugin = require('html-webpack-plugin'); //
plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'app/index.html'), filename: 'index.html', inject: 'body' })]
自刷樣式
//安裝類庫(kù)
npm install --save-dev style-loader@0.20.2 css-loader@0.28.10
//引入樣式
import './style.css';
//配置文件
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
modules: true是ture還是false自行選擇
自刷配置
//安裝類庫(kù)
npm install nodemon@1.15.0 --save-dev
//修改配置
"dev": "nodemon --watch webpack.config.js --exec \" node_modules/.bin/webpack-dev-server --content-base app\""
有點(diǎn)問(wèn)題非春，代處理袁勺。
樣式提取
//安裝類庫(kù)
npm install extract-text-webpack-plugin@3.0.0 --save-dev
//or npm install extract-text-webpack-plugin@3.0.0 -D
//增加配置
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
//提取方案
// https://blog.csdn.net/liuqi332922337/article/details/53157938
此次把提取關(guān)了雹食。
自動(dòng)前綴
//安裝類庫(kù)
npm i autoprefixer@8.0.0 postcss-loader@2.1.1 --save-dev
//添加配置
const autoprefixer = require('autoprefixer');
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({
broswer: 'last 5 versions'
}), //處理CSS前綴問(wèn)題，自動(dòng)添加前綴
]
}
}
],
},
//or use postcss.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
}
]
}
}
//postcss.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
預(yù)編樣式
//安裝類庫(kù)
npm install --save-dev less-loader@4.0.6 less@3.0.1
//添加配置
{
test: /\.less$/,
exclude:/node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({
broswer: 'last 5 versions'
}), //處理CSS前綴問(wèn)題期丰，自動(dòng)添加前綴
]
}
},
{
loader: less-loader'
},
],
},
