1.项目场景是有两个静态资源目录，一个用于开发，一个用于发布，上线多个版本，打包多个版本后，也要部署到同一个服务器的同一个端口下.
根据我自己的摸索，我搞出来了下面的配置，自感觉还蛮好用的
先看我的config.js 用来控制所有的静态资源目录和打包上线路径,
// /public/config.js 除了以下的配置之外，这里面还可以有许多其他配置，例如,pulicPath 的路径等等
module.exports = {
dev: {
template: {
title: '开发的时候的系统名字',
header: false,
footer: false,
publicPath: '/',
publicStaticPath: '../',
// assetsPath: 'assets/' // 开发正常用
assetsPath: 'assets_All/' // 开发测试用--这里有很多用不到的模型以及图片，模型太大，为避免被打包，所以用这个了
}
},
build: {
template: {
title: '我的友好系统',
header:true,
footer:false,
publicPath: '/hahaha/', // 打包上线之前要改一下这个哦TODU-LIST
publicStaticPath: '/hahaha/', // 打包上线之前要改一下这个哦TODU-LIST
// publicPath: '/hahaha1111/', // 打包上线之前要改一下这个哦TODU-LIST
// publicStaticPath: '/hahaha1111/' // 打包上线之前要改一下这个哦TODU-LIST
// publicPath: '/hahaha22222/', // 打包上线之前要改一下这个哦TODU-LIST
// publicStaticPath: '/hahaha22222/' // 打包上线之前要改一下这个哦TODU-LIST,
assetsPath: 'assets/'
}
}
}
再来看一下我的webpack.config.js 用到了上面的配置，但是基本上一般什么都不用动哦~~~
// 如果有額外的.babelrc配置的話就可以使用這段代碼1
// module.exports = {
// module: {
// rules: [
// {
// test:/.jsx?$/,
// use: ['babel-loader'],
// exclude:/node_modules/ //排除 node_modules目錄
// }
// ]
// }
// }
// 如果有額外的.babelrc配置的話就可以使用這段代碼2
// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼1
//webpack.config.js
// 首先引入插件1
// 导入terser-webpack-plugin-->减少js体积(其中删除js的console.log和注释)
const TerserWebpackPlugin = require('terser-webpack-plugin')
// 实例化TerserWebpackPlugin对象
const terserPlugin = new TerserWebpackPlugin({
parallel: 4,
extractComments: true,
terserOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log'], //移除console
},
},
})
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const isDev = process.env.NODE_ENV.trim() === 'development' //html-webpack-plugin 的 config 的妙用4-1
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //清理dist目錄的插件
const path = require('path') //設置出口使用
const config = require('./public/config')[isDev ? 'dev' : 'build'] //html-webpack-plugin 的 config 的妙用4-2
module.exports = {
entry: './src/index.js', //webpack的默認配置，也可以寫一個數組
output: {
path: path.resolve(__dirname, 'dist'), //必須是絕對路徑
// filename: 'bundle.js',
// filename: 'bundle.[hash].js',
filename: 'bundle.[hash:6].js', //考虑到CDN缓存的问题，我们一般会给文件名加上 hash
publicPath: config.template.publicPath
},
mode: isDev ? 'development' : 'production', //html-webpack-plugin 的 config 的妙用4-3
module: {
rules: [
{
test: /.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
[
'@babel/plugin-transform-runtime',
{
corejs: 3,
},
],
],
},
},
exclude: /node_modules|jsm|models/,
},
{
//看清楚啦 這裡有四個loaderloader 的执行顺序是从右向左执行的，也就是后面的 loader 先执行，上面 loader 的执行顺序为: less-loader ---> postcss-loader ---> css-loader ---> style-loader
test: /.(le|c)ss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')({
overrideBrowserslist: ['>0.25%', 'not dead'],
}),
]
},
},
},
'less-loader',
],
exclude: /node_modules/,
},
{
test: /.(png|jpg|gif|jpeg|webp|svg|eot|gltf|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
// options: {
// limit: 10240, //10K
// esModule: false
// }
// ,
// 使用上面的那一段運行後會把圖片名字改為MD5哈希值，使用下面的會保留原有名稱加上六位哈希值
options: {
limit: 10240, //10K
esModule: false,
name: '[name]_[hash:0].[ext]',
outputPath: config.template.assetsPath, //這個可以將打包後的資源放到指定的文件夾下
// outputPath: 'assets', //這個可以將打包後的資源放到指定的文件夾下
},
},
],
exclude: /node_modules/,
},
// {
// test: /.html$/,
// use: 'html-withimg-loader'
// },
],
},
// resolve: { // 本想用这个代码来实现JS引入assets资源为相对路径，但是一直报错
// alias: {
// '@': resolve('src')
// }
// },
optimization: {
minimizer: [
// 只有打包环境为production时才能生效
terserPlugin,
],
},
plugins: [
// 數組，放著所有的webpack插件
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
config: config.template, //html-webpack-plugin 的 config 的妙用4-4
minify: {
removeAttributeQuotes: false, //是否刪除屬性的雙引號
collapseWhitespace: false, //是否折疊空白
},
hash: true, //是否加上hash,默認是false
}),
new CleanWebpackPlugin(), //清理dist目錄插件，不需要傳參數，它自己可以找到outPath
// new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns:['**/*','!dll','!dll/**']}) //如果你有需要不刪除dll目錄下的文件的話可以這樣子寫
new CopyWebpackPlugin({
patterns: [
{
from: 'src/'+ config.template.assetsPath,
to: config.template.assetsPath,
},
],
}),
],
devServer: {
port: '8080', //默認是8080
quiet: false, //默認不啟動
inline: true, // 默認開啟inline 模式，如果設置為false, 開啟 iframe模式
stats: 'errors-only', //終端僅僅打印 error
overlay: false, //默認不啟用
clientLogLevel: 'silent', //日誌等級
compress: true, //是否啟用gzip壓縮
},
devtool: 'cheap-module-eval-source-map', //开发环境下使用 打包上线之前要改一下这个哦TODU-LIST
}
// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼2
.babelrc
{
"presets": ["@babel/preset-env"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
]
]
}
我的package.json
{
"name": "webpack_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "set NODE_ENV=production&& webpack",
"dev": "set NODE_ENV=development&& webpack-dev-server --host 10.251.134.102",
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.8.6",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.6",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"postcss-loader": "^3.0.0",
"style-loader": "^1.1.3",
"terser-webpack-plugin": "^4.2.3",
"url-loader": "^3.0.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"@babel/runtime": "^7.8.4",
"@babel/runtime-corejs3": "^7.8.4",
"copy-webpack-plugin": "^6.0.2",
"html2canvas": "^1.0.0-rc.7",
"tween": "^0.9.0"
}
}
接下来我来放几个代码的使用方式吧~~
// srcindex.js
import './index.less'
// 正式版本------------------------
// import './js/indexV1_1.js' // 初版
// import './js/indexV1_2.js' // 初版功能增强
// 测试版本------------------------
// import './js/indexTest_1.js' // 测试版本1
import './js/indexTest_2.js' // 测试版本2
// class Word {
// constructor(mydata) {
// this.mydata = mydata
// }
// getMydata() {
// return this.mydata
// }
// }
// const start = new Word('项目已启动')
console.log('项目已启动')
先来看一下less里的图片引用方式
srcindex.less
@color: red;
body {
background: #020929;
// div{
// color: @color;
// transition: all 2s;
// }
// background: url('./assets/img/mya.png');
.panel {
border: 0;
400px;
font-size: 30px;
line-height: 31px;
text-indent: 20px;
}
}
我们再来看一下js的图片引用方式
const isDev = process.env.NODE_ENV.trim() === 'development'
const config = require('../../public/config')[isDev ? 'dev' : 'build']
const staticUrl = config.template.publicStaticPath
export { staticUrl }
再来看一下srcjsindexV1_2.js
import { staticUrl } from './tool'
var planeTexture = new THREE.TextureLoader().load(
staticUrl + 'assets/img/equipment/floor.png'
)
好了，这个就是大概的使用方法了~~ 目前已经试过多次，打包运行什么的没得毛病哦，我觉得还挺好用
希望路过的大佬指点一下有没有更好的办法~~~