码迷,mamicode.com
首页 > 其他好文 > 详细

vue-loader的配置

时间:2020-05-06 20:01:47      阅读:124      评论:0      收藏:0      [点我收藏+]

标签: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"
  },

 

vue-loader的配置

标签:load   require   开发   pre   环境   dev   undle   file   dir   

原文地址:https://www.cnblogs.com/em2464/p/12836610.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!