wepack从0开始配置vue环境之二: 线上部署配置优化

wepack从0开始配置vue环境之一:基础配置
webpack之三集成vuex和vue-Router

• 调整目录结构

新建/build存放webpack配置文件
build目录下新建文件:

1. webpack.config.base.js(以下简称base) -> 基础配置文件
   复制/webpack.config.js文件到base, 删除isDev判断环境的代码, 删除所有的插件
2. webpack.config.client.js(以下简称client) -> 客户端配置文件
   使用webpack-merge: cnpm i webpack-merge -D, 扩展base文件
   复制/webpack.config.js文件到client, 引入base, 删掉config, 引入webpack-merge, 声明一个config, 在两个不同的环境使用merge配置不同的参数,优化静态资源目录等
3. 修改package.json的script命令

"build": "cross-env NODE_ENV=prodution npm run clean && webpack --config build/webpack.config.client.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",

4. 调整业务代码存放文件的目录结构,每个部分单独创建文件夹,将src文件夹更名为client

• vue-loader的配置

1. 新建/build/vue-loader.config.js, module.exports 一个function, 为了判断环境
2. vue-loader配置项:
   -- preserveWhitespace: false -> template里一行最后多余的空格会导致编译时出问题, 这个参数设置true可以忽略空格
   -- extractCSS: true -> 将.vue文件里的css单独打包成css文件
   -- cssModules{} -> css模块化, cssModules.localIdentName和camelCase: true(将css中用 '-' 连接的转化为驼峰)

    cssModules: {
      localIdentName: '[path]-[name]--[local]--[hash:base64:5]',
      camelCase: true
    } 
在.vue文件中使用
1.


2.

css-loader也可以定义cssModules, 定义之后就必须以模块的方式引入css, 使用也类似rn里的css用 '.'访问

{
  loader: 'css-loader',
  options: {
    module: true,
    localIdentName: isDev ? '[path]-[name]--[local]--[hash:base64:5]' : '[name]-[hash:base64:5]'
  }
}

-- hotReload:false -> 禁用热重载, 这个选项是默认根据环境变量改变的, 不需单独设置
-- loaders: {'docs': docsLoader} -> .vue文件里自定义模块做自定义loader, 就是类似于