标签：use 依赖 webpack3 loader webpack 版本 entry js const
虽然现在已经出到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/,//不监测
}
};
标签：use,依赖,webpack3,loader,webpack,版本,entry,js,const 来源： https://blog.csdn.net/weixin_44679078/article/details/120570175
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。