webpack安装
注意：请先安装node环境
npm install webpack@3.11.0 -g
建议大家这样操作(随时切换镜像源)：
npm install nrm -g // 安装nrm
nrm ls // 查看镜像源
nrm use taobao // 选择淘宝镜像，也可以选择cnpm
使用webpack
01-webpack-cli
使用命令：webpack 输入文件路径 打包后文件路径将一个文件打包成另外一个文件
02-webpack-config
配置webpack.config.js
运行webpack
varpath=require('path')
module.exports={
// 入口文件配置
entry:"./src/app.js",
// 出口文件配置项
output: {
// 输出的路径，webpack2起就规定必须是绝对路径
path:path.join(__dirname,'dist'),
// 输出文件名字
filename:"bundle.js"
}
}
03-webpack-dev-server
默认为--inline模式
运行：npm init -y
运行：npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D
varpath=require('path')
module.exports={
// 入口文件配置
entry:"./src/app.js",
// 输出配置
output: {
// 输出的路径
path:path.join(__dirname,'dist'),
// 静态资源在服务器上运行时的访问路径，可以直接http://localhost:8080/dist/bundle.js访问到服务器中的bundle.js文件
publicPath:'/dist',
// 输出文件名字
filename:"bundle.js"
}
}
index.html中修改 <script src="/dist/bundle.js"></script>
运行：webpack-dev-server
运行：webpack-dev-server --inline --hot --open --port 8090
配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"
npm run dev
04-webpack-css
安装npm install css-loader style-loader --save-dev
module: {
rules: [
// 配置的是用来解析.css文件的loader(style-loader和css-loader)
{
// 1.0 用正则匹配当前访问的文件的后缀名是 .css
test:/\.css$/,
use: ['style-loader','css-loader']//webpack底层调用这些包的顺序是从右到左
}
]
}
05-webpack-less&webpack-sass
npm install less less-loader sass-loader node-sass --save-dev
{
test:/\.less$/,
use: [{
loader:'style-loader'
}, {
loader:'css-loader'
}, {
loader:'less-loader'
}]
},
{
test:/\.scss$/,
use: [{
loader:'style-loader'
}, {
loader:'css-loader'
}, {
loader:'sass-loader'
}]
}
06-webpack-图片&字体
npm install file-loader url-loader --save-dev
url-loader封装了file-loader
{
test:/\.(png|jpg|gif)/,
use: [{
loader:'url-loader',
options: {
// limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
limit:50000
}
}]
}
07-webpack-html
1.npm install html-webpack-plugin --save-dev
2.如果添加了title，需要在模板中添加<%= htmlWebpackPlugin.options.title %>
// 注意需要注释掉publicPath，不然会冲突
varHtmlWebpackPlugin=require('html-webpack-plugin')
plugins: [
newHtmlWebpackPlugin({
filename:'index.html',
template:'template.html'
})
]
08-webpack-babel
npm install babel-core babel-loader babel-preset-env --save-dev
注意：
webpack 1.x | babel-loader <= 6.x
webpack 2.x | babel-loader >= 7.x (推荐) (^6.2.10 也能用, 但是会出现不推荐使用的警告)
webpack 3.x | babel-loader >= 7.1
{
test:/\.js$/,
// Webpack2建议尽量避免exclude，更倾向于使用include
// exclude: /(node_modules)/, // node_modules下面的.js文件会被排除
include: [path.resolve(__dirname,'src')]
use: {
loader:'babel-loader',
// options里面的东西可以放到.babelrc文件中去
options: {
presets: ['env']
}
}
}
// .babelrc文件内的配置
{
"presets":["env"]
}
