本菜鸟搭建的入门级别的webpack环境, 仅供参考,webpack学精很不容易,每个插件作者都有自己的思想。 待我吃透了再说。 待我后续完善, 目前可以
- 提取图片
- 服务器环境 支持跨域 热更新
- ES6语法降级
- less 转 es6
//压缩js插件
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
//
var webpack = require('webpack');
//提取公共代码
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//在使用时将不再需要import和require进行引入, ProvidePlugin进行实例初始化后,jquery就会被自动加载并导入对应的node模块中
var providePlugin = new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' });
module.exports = {
entry: { //多入口
index: './src/js/index.js',
goodsInfo: './src/js/goodsInfo.js'
},
output: {//多出口
filename: '[name].js',
path: __dirname + '/out',
publicPath: 'http://localhost:8080/out'
},
module: {
rules: [
{ test: /.js$/, use: ['babel-loader'] }, //js语法降级
// { test: /.css$/, use: ['style-loader', 'css-loader'] }, //css
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{ test: /.jpg|png|gif|svg$/, use: ['url-loader?limit=8192&name=./[name].[ext]'] },
//设置尺寸名字和扩展名
{ test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
},
plugins: [
new UglifyJSPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "commons.js",
minChunks: 2
}),
new ExtractTextPlugin("[name].css"),
providePlugin
],
devServer: {
quiet: false, //控制台中不输出打包的信息
open: true, //打开浏览器
noInfo: false,
hot: true, //开启热点
inline: true, //开启页面自动刷新
lazy: false, //不启动懒加载
progress: true, //显示打包的进度
watchOptions: {
aggregateTimeout: 300
},
port: '8088', //设置端口号
proxy: { //跨域
'/api': {
target: 'http://localhost:80', //目标服务器
ws: true, //开启websocket
changeOrigin: true, //开启代理
pathRewrite: {
'^/api': '/api' // 会请求到 http://localhost:80/api
}
}
}
}
}
package.json文件
{
"name": "webpack1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"duyi": "webpack-dev-server --devtool eval-source-map --progress --colors"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.3",
"css-loader": "^0.28.10",
"file-loader": "^1.1.9",
"style-loader": "^0.20.2",
"uglifyjs-webpack-plugin": "^1.2.2",
"url-loader": "^0.6.2",
"webpack": "^3.5.5"
},
"devDependencies": {
"extract-text-webpack-plugin": "^3.0.2",
"jquery": "^3.3.1",
"less": "^3.0.1",
"less-loader": "^4.0.6"
}
}