entry:入口文件
output:出口文件
module:模块
plugins:插件
这几部分
1.基本配置
运行 webpack 这一命令可以将以app.js及其依赖的js文件打包到dist文件夹下的main.js文件下
var path = require('path')
module.exports = {
// 入口文件配置
entry: "./src/app.js",
// 出口文件配置项
output: {
// 输出的路径，webpack2起就规定必须是绝对路径
path: path.join(__dirname, 'dist'),
// 输出文件名字
filename: "main.js"
}
}
2.引入webpack-dev-server将文件打包到内存中，使得文件保存后刷新页面即可得到新的结果
需要先进行运行：
1.npm init -y
2.npm i webpack-dev-server -g（全局安装，否则报错）
2.npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D
var path = 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: "main.js"
}
}
更改完成后运行：webpack-dev-server
下面是配置热启动，免刷新
配置script："dev": "webpack-dev-server --inline --hot --open --port 80
运行：npm run dev 可以直接打开页面，不用复制地址打开
3.安装npm install css-loader style-loader --save-dev
这个可以用来配置module文件，配置依赖的loader文件
module: {
rules: [
// 配置的是用来解析.css文件的loader(style-loader和css-loader)
{
// 1.0 用正则匹配当前访问的文件的后缀名是 .css
test: /\.css$/,
use: ['style-loader', 'css-loader'] //webpack底层调用这些包的顺序是从右到左
}
]
}
3.1webpack-less&webpack-sass
配置less和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'
}]
}
3.2webpack-图片&字体
npm install file-loader url-loader --save-dev
{
test: /\.(png|jpg|gif)/,
use: [{
loader: 'url-loader',
options: {
// limit表示如果图片大于50000byte，就以路径形式展示，小于的话就用base64格式展示
limit: 50000
}
}]
}
4.webpack-html
npm install html-webpack-plugin --save-dev
// 注意需要注释掉publicPath，不然会冲突
var HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'template.html'
})
]
5.npm install babel-core babel-loader babel-preset-env --save-dev
{
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"]
}
