虽然现在已经出到webpack5,但是公司里面的项目老旧,用的依然是webpack3,学习了一遍webpack3的使用,由于现在的依赖包版本的更新了很多,在webpack3上使用会各种出错,所以记录下适用的版本。
学习资料:
学完后的项目文件:
https://gitee.com/ayaan/webpack3-exercise
package.json
{
"name": "webpack3",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"server": "webpack-dev-server",
"dev": "set type=dev&webpack",
"build": "set type=build&webpack",
"watch": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.8.7",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^2.0.2",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"html-withimg-loader": "^0.1.16",
"less": "^3.13.1",
"less-loader": "^4.1.0",
"node-sass": "^4.14.1",
"postcss-loader": "^4.3.0",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"sass-loader": "^7.3.1",
"style-loader": "^2.0.0",
"url-loader": "^1.1.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.8.2"
},
"dependencies": {
"jquery": "^3.6.0"
},
"browserslist": [
"last 3 Chrome versions",
"last 3 Firefox versions",
"Safari >= 10",
"Explorer >= 11",
"Edge >= 12",
"iOS >= 10",
"Android >= 6"
]
}
webpack.config.js
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
const entry = require("./webpack_config/entry_webpack.js");
const webpack = require('webpack');
const copyWebpackPlugin = require("copy-webpack-plugin")
if(process.env.type== "build"){
var website={
publicPath:"http://192.168.0.104:1717/"
}
}else{
console.log( 'kkk',encodeURIComponent(process.env.type) );
var website={
publicPath:"http://localhost:1717/"
}
}
module.exports = {
devtool: 'eval-source-map',
//入口文件的配置项
// entry: {
// //里面的entery是可以随便写的
// entry: './src/entry.js',
// //这里我们又引入了一个入口文件
// entry2: './src/entry2.js'
// },
// entry: entry.path,
entry: {
entry: './src/entry.js',
jquery: 'jquery'
},
//出口文件的配置项
output: {
//输出的路径,用了Node语法
path: path.resolve(__dirname, 'dist'),
//输出的文件名称
filename: '[name].js',
publicPath:website.publicPath
},
//模块:例如解读CSS,图片如何转换,压缩
module: {
rules: [
{
test: /\.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test: /\.less$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
})
},
{
test:/\.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500,
outputPath:'images/'
}
}]
},
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
},
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader'
},
exclude:/node_modules/
}
]
},
//插件,用于生产模版和各项功能
plugins: [
// new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
}),
new extractTextPlugin("/css/index.css"),
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'src/*.html')),
}),
new webpack.ProvidePlugin({
$:"jquery"
}),
new webpack.BannerPlugin('BannerPlugin插件是webpack自带的插件,用来在打包后文件的头部添加注释'),
//优化
new webpack.optimize.CommonsChunkPlugin({
name:['jquery'], //对应入口文件的jquery(单独抽离)
filename:'assets/js/[name].js', //抽离到哪里
minChunks:1 //抽离几个文件
}),
new copyWebpackPlugin([{
from: __dirname + '/src/public', //要打包的静态资源目录地址,这里的__dirname是指项目目录下,是node的一种语法,可以直接定位到本机的项目目录中
to: './public' //要打包到的文件夹路径,跟随output配置中的目录。所以不需要再自己加__dirname
}])
],
//配置webpack开发服务功能
devServer: {
//设置基本目录结构
contentBase: path.resolve(__dirname, 'dist'),
//服务器的IP地址,可以使用IP也可以使用localhost
host: 'localhost',
//服务端压缩是否开启
compress: true,
//配置服务端口号
port: 1717
},
watchOptions:{
poll:1000,//监测修改的时间(ms)
aggregateTimeout:500, //防止重复按键,500毫米内算按键一次
ignored:/node_modules/,//不监测
}
};