标签：res ted public extract evel 属性 -- 响应 文件名
加载模块：npm install postcss-loader autoprefixer css-loader sass-loader -D
在webpack基础环境配置中添加：
rules: [
{
test: /\.scss/, //css预处理器 后缀名.scss
use: [
‘vue-style-loader‘, //将css以js形式插入HTML中
‘css-loader‘, //专门处理css文件
{
loader: "postcss-loader",
options: {
sourceMap: true, //直接使用前面生成的sourceMap，编译的效率会快点
}
},
‘sass-loader‘ //专门处理sass文件，转为css文件，不处理css
]
}
]
在项目根目录创建 postcss.config.js，并且设置支持哪些浏览器，内容如下：
const autoprefixer = require(‘autoprefixer‘);
module.exports = {
plugins: [
require(‘autoprefixer‘)({
"overrideBrowserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
})
]
}
解决不同平台直接设置环境变量（如window上使用配置环境需要在NODE_ENV=development前加set）而通过cross-env NODE_ENV=development 可以让我们在不同的平台上执行脚本；
加载模块：npm install cross-env -D
在package.json中修改以下命令： "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "cross-env NODE_ENV=development webpack --config build/webpack.dev.config.js", "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js" }
cross-env NODE_ENV=development 作用：不同平台上设置区分环境变量（开发与生产）
通过设置 const isDev = process.env.NODE_ENV === ‘development‘ 判断环境是否为开发或生产环境
当然这里已经在package.json中配置好了不同环境，只要执行不同的命令就能在指定的环境下启动项目。
（专门用于开发模式）监听文件的变化、监听端口号，是否自动打开浏览器并自动刷新网页，做到实时预览
加载模块：npm install webpack-dev-server -D
加载模块好以后，需要在package.json文件中添加一条指令用来启动webpack-dev-server
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js"
}
webpack-merge的包来进行两个webpack配置之间的合并在vue中主要是将不同环境下的webpack配置参数与基础配置参数合并（用优雅的方式提取公共配置部分的代码），使用方式如下：
加载模块：npm install webpack-merge -D
// 引入基本webpack基本配置
const baseWebpackConfig = require(‘./webpack.base.config‘);
//将基本配置与dev环境配置合并，然后导出
const devWebpackConfig = merge(baseWebpackConfig,{
module:{}
devServer:{}
}）
module.exports = devWebpackConfig;
作用：在webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中通过Babel，可以帮我们将高级的语法转换为低级的语法。
npm install babel-core babel-loader babel-plugin-transform-runtime -D
npm install babel-preset-env babel-preset-stage-2 -D
npm install babel-plugin-transform-vue-jsx babel-plugin-syntax-jsx babel-helper-vue-jsx-merge-props -D
babel-polyfill 解决不同浏览器低版本不兼容问题（主要是IE的兼容） 因为ie9和一些低版本的高级浏览器对es6新语法并不支持 npm install babel-polyfill -D 在main.js及vuex入口文件中最上一行引入： import ‘babel-polyfill‘
加载插件：npm install copy-webpack-plugin -D
const CopyWebpackPlugin = require(‘copy-webpack-plugin‘);
//在配置中加入以下内容：
plugins:[
new CopyWebpackPlugin([//复制插件
{
from: path.resolve(__dirname, ‘../static‘),
to: baseconfig.dev.assetsSubDirectory,
ignore: [‘.*‘]//忽略.*的文件
}
])
],
第一步：安装generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
第二步：在根目录下添加serverConfig.json的配置文件,内容如下：
{
"ApiUrl":"http://localhost:8082/",
}
第三步：在build/webpack.prod.config.js文件里引入generate-asset-webpack-plugin
const GeneraterAssetPlugin = require(‘generate-asset-webpack-plugin‘)
第四步：引入添加的serverConfig.json文件const serverConfig = require(‘../serverConfig.json‘)第五步：添加打包时写入配置文件的代码
const createServerConfig = function(compilation){
return JSON.stringify(serverConfig);
}
第六步：添加打包时输出配置文件的代码
plugins:[
//让打包的时候输入可配置的文件
new GenerateAssetPlugin({
filename: ‘serverconfig.json‘,
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
}),
]
第七步：在main.js中添加读取build之后的代码(我这里通过axios实现异步调取)
Vue.prototype.getConfigJson = function () {
axios.get(‘serverConfig.json‘).then((result)=>{
Vue.prototype.ApiUrl =result.data.ApiUrl;//设置成Vue的全局属性 ApiUrl:域名接口
new Vue({
router,
store,
render: (h) => h(App)
}).$mount(‘#root‘);
}).catch((error)=>{
console.log(error)
})
}
第八步：项目中引用
vue文件中直接引用 this.ApiUrlnpm install html-webpack-plugin --save-dev
// 文件名及时更改，自动打包并且生成响应的文件在index.html里面
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
//将以下内容放入plugin中
new HtmlWebpackPlugin({
template: path.join(__dirname,‘../index.html‘)
})
npm install lockr -D
相比较extract-text-webpack-plugin有以下不同：
npm install mini-css-extract-plugin -D
const miniCssExtractPlugin=require("mini-css-extract-plugin"); // css单独提取打包
生产环境中在webpack配置文件中的plugins加入以下内容：
plugins: [ new miniCssExtractPlugin({filename: ‘css/main.[contentHash:8].css‘}), ]
添加 publicPath: ‘../‘ 是为了解决背景图片在打包后路径不对的问题（背景图片通过css预处理器加载的会将static当成根目录）
module: { rules: [ { test: /\.scss/, //css预处理器 后缀名.scss use: [ { loader:miniCssExtractPlugin.loader, options:{ publicPath: ‘../‘ } }, ‘css-loader‘, //专门处理css文件 { loader: "postcss-loader", options: { sourceMap: true, //直接使用前面生成的sourceMap，编译的效率会快点 } }, ‘sass-loader‘ //专门处理sass文件，转为css文件，不处理css ] } ] },
npm install node-sass sass-loader style-loader -D
module: { rules: [ { test: /\.scss/, //css预处理器 后缀名.scss use: [ ‘vue-style-loader‘, //将css以js形式插入HTML中 ‘css-loader‘, //专门处理css文件 { loader: "postcss-loader", options: { sourceMap: true, //直接使用前面生成的sourceMap，编译的效率会快点 } }, ‘sass-loader‘ //专门处理sass文件，转为css文件，不处理css ] } ] },
<style lang="scss" scoped> </style>
在之前版本中我们使用extract-text-webpack-plugin来提取CSS文件，不过在webpack 4.x中则应该使用mini-css-extract-plugin来提取CSS到单独文件中
在Webpack 4.x中，新增了optimization的选项来代替之前版本中的webpack.optimize等。在optimization选项中，我们可以进行详细的设置，以达到分离CSS，分离Chunk，压缩文件等等操作
npm install optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘);
在module中添加：
optimization: {
//压缩单独css文件 minimizer: [ new OptimizeCSSAssetsPlugin({}), ],
//分离js文件 splitChunks: { chunks: ‘all‘ }, runtimeChunk: true // webpack相关代码打包到一个文件中，好处：可以规避新的模块加入的时候，webpack给新的模块加id后，插入的顺序可能在中间，使后面模块id变化，会导致打包出的hash产生变化，这样hash就不能进行常缓存 },
npm install qrcodejs2 -D
在组件中引入：
import QRCode from ‘qrcodejs2‘ // 引入qrcode<div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
mounted () {
this.qrcode();
},
methods: {
qrcode() {
let qrcode = new QRCode(‘qrcode‘, {
width: 132,
height: 132,
text: ‘https://www.baidu.com‘, // 二维码地址
colorDark : "#000",
colorLight : "#fff",
})
},
} rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除（这里用做打包文件的每次打包时删除）npm install rimraf -D "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js", "clean": "rimraf dist", "build:pro": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js", "build": "npm run clean && npm run build:pro" },
npm install vue-lazyload --D
import Vue from ‘vue‘ import App from ‘@/App‘ import VueLazyload from ‘vue-lazyload‘ Vue.use(VueLazyload, { preLoad: 1, //预加载高度的比例 error: ‘‘, //图像的src加载失败 loading: ‘‘, //src的图像加载 attempt: 1, //尝试计数 listenEvents: [ ‘scroll‘, ‘mousewheel‘ ] //监听事件 });
import Vue from ‘vue‘ import App from ‘./pages/app.vue‘; new Vue({ el:‘#root‘, render:h=>h(App) })
npm vue-wechat-title --D main.js中引入： import VueWechatTitle from ‘vue-wechat-title‘ Vue.use(VueWechatTitle); 然后在路由配置中添加meta： meta:{ title:‘首页‘, requireAuth:true }, 在App.vue文件中使用 <div v-wechat-title="$route.meta.title"> 或 <router-view v-wechat-title="$route.meta.title"></router-view>
加载模块：
npm install vuex vuex-persistedstate -D 在vuex初始化时候，作为组件引入。 import Vue from ‘vue‘; import ‘babel-polyfill‘ import Vuex from ‘vuex‘; import common from ‘./modules/common‘; import buy_ticket from ‘./modules/buy_ticket‘; import createPersistedState from ‘vuex-persistedstate‘ //使用 vuex-persistedstate 这是一个用于 vuex 在页面刷新之间处理和存储状态的插件。 Vue.use(Vuex); export default () => { return new Vuex.Store({ modules: { common:common, buy_ticket:buy_ticket, }, plugins: [createPersistedState()] }) };
仅用作个人记录，有什么建议可以留言
标签：res ted public extract evel 属性 -- 响应 文件名
原文地址：https://www.cnblogs.com/xujianwu/p/11413971.html
