一：清除每次打包生成的文件
- 安装clean-webpack-plugin插件
- 在webpack.config.js引入插件
- 在plugins里面新增一个配置
// 需要清除的目录
new cleanWebpackPlugin(['dist'])
二：配置webpack开发服务器
- 安装webpack-dev-server
- 在webpack.config.js里面配置devServer
// 本地服务器配置
devServer: {
port: 8080,
}
- 在package.json里面配置webpack的启动命令
"scripts": {
"server": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
}
三：配置本地代理
- 在devServer下面配置代理
// 本地服务器配置
devServer: {
port: 8080,
// 代理
proxy: {
'/api': {
target: "https://m.weibo.cn",
changeOrigin: true
}
}
}
- 使用
$.get('/api/comments/show?id=4199740256395164&page=1', function(res) {
console.log(res);
})
四：开启source-map
- js的source-map
在webpack.config.js里面添加devtool就可以
devtool: 'source-map'
总共有7个值，开发的时候建议使用cheap-module-source-map
- css的source-map
需要在每个处理css的loader里面options里设置sourceMap: true（注意style-loader开启singleton: true，sourceMap不生效）
五：配置开发环境和生产环境
- 在根目录下创建build文件夹，分别创建webpack.common.conf.js, webpack.dev.conf.js和webpack.prod.conf.js
- 配置package.json的文件
"scripts": {
"server": "webpack-dev-server --env development --open --config build/webpack.common.conf.js",
"build": "webpack --env production --config build/webpack.common.conf.js",
"test": "echo \"Error: no test specified\" && exit 1"
}
- 编写webpack.common.conf.js
const productionConfig = require('./webpack.dev.conf');
const developmentConfig = require('./webpack.prod.conf');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const generateConfig = env => {
const scriptLoader = [
{
loader: 'babel-loader',
options: {
presets: ['env']
}
}
];
// 处理cssloader
const extractLess = new ExtractTextWebpackPlugin({
filename: 'css/[name]-min-[hash:5].css',
allChunks: true // 一开始所有css都打包
});
const cssLoaders = [
{
loader: 'css-loader', // 放在后面的先被解析
options: {
minimize: true,
modules: true,
sourceMap: env === 'development',
localIdentName: '[local]'
}
},
{
loader: 'less-loader',
options: {
sourceMap: env === 'development'
}
}
];
const styleLoader = env === 'production'
? ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: cssLoaders
})
: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: cssLoaders
});
// 处理文件
const fileLoader = env === 'production'
? [{
loader: 'url-loader',
options: {
outputPath: './assets/images', //指定图片路径
limit: 10000 // 小于10k使用base64编码
}
}]
: [
// 使用url-loader
{
loader: 'file-loader',
options: {
outputPath: 'assets/images', //指定图片路径
}
}];
return {
// 入口
entry: {
app: './src/app.js'
},
// 输出
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: env === 'production' ? './' : '/',
filename: 'js/[name]-bundle-[hash:5].js' // 带hash值得js
},
module: {
// 使用ExtractTextWebpackPlugin
rules: [
// 处理js
{
test: /\.js$/,
use: scriptLoader
},
// 处理less
{
test: /\.less$/,
use: styleLoader
},
{ // 加载jQuery
test: path.resolve(__dirname, 'src/app.js'),
use: [
{
loader: 'imports-loader',
options: {
$: 'jquery'
}
}
]
},
// 处理html中路径
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src']
}
}
]
},
// 处理图片地址
{
test: /\.(png|jpg|jpeg|gif)$/,
use: fileLoader.concat(env === 'production'
? {
loader: 'img-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
: [])
}
]
},
plugins: [
extractLess,
// 使用jQuery（npm管理）
new webpack.ProvidePlugin({
$: 'jquery'
}),
new HtmlWebpackPlugin({
template: './index.html', // 文件地址
filename: 'index.html', // 生成文件名字
// inject: false, // 不把生成的css，js插入到html中
chunks: ['app'], //指定某一个入口，只会把入口相关载入html
minify: { // 压缩html
collapseWhitespace: true // 空格
}
}),
// 需要清除的目录
new cleanWebpackPlugin(['../dist'])
]
}
}
module.exports = env => {
let config = eval === 'production'
? productionConfig
: developmentConfig
return merge(generateConfig(env), config)
}
- 编写开发环境配置
module.exports = {
// 本地服务器配置
devServer: {
port: 8080,
// 代理
proxy: {
'/api': {
target: "https://m.weibo.cn",
changeOrigin: true
}
},
logLevel: 'debug' // 看到控制台更多信息
},
// 开启source MAp
devtool: 'source-map',
}
- 生产环境配置
var cleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
plugins: [
]
};
