初始化一個webpack項目
npm init
npm install --save-dev webpack webpack-cli
webpack目錄結構
配置入口和輸出
- 創建 webpack.config.js
- 入口文件爲 src/index.js
- 輸出打包文件爲 dist/bundle.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
代理服務器和熱更新
npm install webpack-dev-server --save-dev
- 加入配置
devServer: {
contentBase: './dist',
host: 'localhost',
port: 8000
}
對css進行打包
npm install style-loader css-loader --save-dev
- 引入配置
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
使用less和sass
npm install less less-loader --save-dev
npm install sass-loader node-sass --save-dve
- less和sass的使用方式基本一致
- less的文件後綴爲 .less
- sass的文件後綴爲 .scss
- 引入配置
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
自動添加瀏覽器前綴
npm install postcss-loader autoprefixer --save-dev
- 在package.json文件中加入
"browserslist": [
"ie >= 8",
"Firefox >= 20",
"Safari >= 5",
"Android >= 5",
"Ios >= 6",
"last 4 version"
]
- 引入配置
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader',{
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')()
]
}
}],
}
]
}
編譯後運行的效果圖
使用bootstrap
- npm install bootstrap@3
- 將font文件夾和css文件夾複製到src目錄
- index.js 引入 import './css/bootstrap.min.css'
- webpack.config.js 配置
- bootstrap文件打包配置
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [{
loader: 'file-loader',
options: {
outputPath: 'font'
}
}]
}
- css文件打包配置(不設置會打包失敗)
{
test: /\.(css)$/,
use: ['style-loader', 'css-loader']
}
使用jquery
- 第一種方法
- npm install jquery --save-dev
- src/index.js文件中引入 import jquery from 'jquery'
- 使用
$(function() {
$('.header').addClass('one')
})
- 第二種方法
- 配置webpack.config.js
- resolve: {
alias: {
JQuery: path.resolve(__dirname, 'src/js/jquery.min.js')
}
},
plugins: [
new webpack.ProvidePlugin({
JQuery: "JQuery"
})
]
- 使用
- JQuery(function() {
JQuery('#header').addClass('three')
})