webpack和vuecli3
有inline 和iframe模式 inline在控制台打印编译情况 iframe在网页上以iframe形式显示
--watch 自动打包
修改iview中源码无效 因为nodeModules中packageJson的main入口为打包后文件 如果需要修改可以修改后打包替换打包后的文件即可
webpack.prod/base/dev.conf,js...等分别配的是开发生产基本模式的配置文件 dev-server的basecontent决定服务器启动引用的文件
devserver https://segmentfault.com/a/1190000013396072 只有在nodeenv==development才生效果
vuecli3 简化
const webpack = require('webpack');
const isDev = process.env.NODE_ENV === 'development';
const pluginsBase = [
new webpack.DefinePlugin({
__DEV__: isDev,
__SERVER_ENV__: `"${process.env.SERVER_ENV}"`,
__LOCAL__: !!process.env.LOCAL
})
];
//此处写法与webpack有一定差别 vuecli一般在packageJson中指名
"serve": "cross-env NODE_ENV=development SERVER_ENV=dev LOCAL=true vue-cli-service serve --hot",
//而webpack
webpack-dev-server --inline -clolors --progress --config build/webpack.dev.config.js 启动指定的配置文件
配置文件中
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),实现node_env赋值module.exports = {
publicPath: '.', 打包后js的引用路径 默认为/ 一般改为./当前目录
outputDir: '../webroot', /输出目录
lintOnSave: true, //默认为true,设置为false时 校验的非语法问题不会报错
configureWebpack: config => {
//给webpack注入plugin
config.plugins = [...config.plugins, ...pluginsBase];
if (!isDev) {
//去掉console
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
}
},
//或者使用对象形式 用chianwebpack也可以,会和默认配置合在一块
configureWebpack: {
resolve: {
alias: {
'@assets': resolve('src/assets')
},
extensions:['js','vue','json']
}
},
//生产环境时要关闭sourcemap source里的webpack://可以看到源码调试
productionSourceMap: false,
css: {
extract: isDev?false:true, //生产环境时要压缩
sourceMap:isDev?true:false,
loaderOptions: {
//定义sacc全局变量
sass: {
prependData: `
@import "@/assets/style/index.scss";
}
},
modules: false
},
chainWebpack: config => {
// 修复HMR 发现修改.vue文件里面的内容之后，页面不会自动刷新。
config.resolve.symlinks(true);
},
devServer: {
open: true ,//自动打开浏览器
host: '0.0.0.0', //服务器设置为0.0.0.0可以供别人访问
hot:true, //需要webpack的 hotmoduleplugin插件 没有此插件的话 启动时加上--hot
port: 8080,
https: false,
hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
proxy: {
'/p/': {
target: 'https://tytest.yasset.com', // devserve proxy axios等不设置没有域名时才生效 顺序自动带服务器域名=>proxy域名=>设置的域名 请求都要设置域名 资源可以请求当前项目不带域名比较快
changeOrigin: true,
pathRewrite：‘’
}
}
}
};面试之常用webpack插件:
ExtractTextPlugin 抽取css // 优化、最小化css代码，如果只简单使用extract-text-plugin可能会造成css重复
66 // 具体原因可以看npm上面optimize-css-assets-webpack-plugin的介绍
OptimizeCSSPlugin// 将static文件夹里面的静态资源复制到dist/static
new CopyWebpackPlugindefineplugin 定义全局变量
provideplugin $:jquery,_:lodash 全局import https://www.cnblogs.com/dora-zc/p/10066932.html
uglifyjsplugin
hotmodulereplacement
htmlwebpackplugin 等
多页面配置
vue cli3中
pages:{
download:'./src/download/download.js',
//简写会默认在puplic文件夹中找到对应的download.html
index:'./src/main.js',
index: {
// entry for the page
entry: 'src/login/login.ts',
// the source template
// title: "Login page",
template: 'src/login/login.html',
// output as dist/index.html
filename: 'index.html',
},
main: {
entry: 'src/main.ts',
// title: "main page",
template: 'src/index.html',
filename: 'main.html',
chunks: ['app']
}
}
},
webpack中使用entery 配合htmltemplateplugin使用
'use strict';
const glob = require('glob');
const pages = {};
glob.sync('./src/pages/**/app.js').forEach(path => {
const chunk = path.split('./src/pages/')[1].split('/app.js')[0];
pages[chunk] = {
entry: path,
template: './src/pages/'+chunk+'/'+chunk+'.html',
chunks: ['chunk-vendors', 'chunk-common', chunk]
};
});
module.exports = {
lintOnSave: true,
productionSourceMap: false,
css: {
extract: true,
sourceMap: false,
loaderOptions: {},
modules: false
},
chainWebpack: (config) => {
// 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS
config.optimization
.splitChunks({
cacheGroups: {}
});
config.plugins.delete('named-chunks');
},
pages,
devServer: {
}
};