标签:load require 开发 pre 环境 dev undle file dir
build/vue-loader.coonfig.js
module.exports = (isDev) => { return { preserveWhitepace: true, //清除文本换行等情况空格 extractCSS: isDev ? false : true, // 把vue的css提取到单独的文件,默认 cssModules: { localIndetName: ‘[xxx]‘, camcelcase: true }, // 用法:<style module> hotReload: true, // 热更新,默认会自动判断是否开发环境自动开启关闭,其实关闭后也会刷新页面更新 }; };
webpack.config.base.js修改如下:
const path = require(‘path‘); const vueloaderOptions=require(‘./vue-loader.config‘) const isDev = process.env.NODE_ENV === ‘development‘ const config = { target: ‘web‘, entry: path.join(__dirname, ‘../client/index.js‘), //__dirname 当前文件所在的目录地址 output: { filename: ‘bundle.js‘, path: path.join(__dirname, ‘../dist‘), }, module: { rules: [ { test: /\.vue$/, loader: ‘vue-loader‘, options:vueloaderOptions(isDev), exclude:/node_modules/ },
rimraf——每次打包之前删除之前的包 执行命令 rimraf dist
package.json配置如下:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js","clean": "rimraf dist", "build": "npm run clean && npm run build:client", "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js" },
标签:load require 开发 pre 环境 dev undle file dir
原文地址:https://www.cnblogs.com/em2464/p/12836610.html