webpack配置（vue）

Vue-loader

　　Vue-loader 是一个加载器，能把 .vue 文件转换为js模块。

　　Vue Loader 的配置和其它的 loader 不太一样。除了将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，还需要在 webpack 配置中添加 Vue Loader 的插件

        npm install -D vue-loader vue-template-compiler

        // webpack.config.js
        const VueLoaderPlugin = require('vue-loader/lib/plugin')
        module.exports = {
          module: {
            rules: [
              {
                test: /.vue$/,
                loader: 'vue-loader'
              }
            ]
          },
          plugins: [
            new VueLoaderPlugin()
          ]
        }

 

Vue Cli

　　调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

        // vue.config.js
        module.exports = {
          configureWebpack: {
            plugins: [
              new MyAwesomeWebpackPlugin()
            ]
          }
        }

　　注意：有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。

　　如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 。

        // vue.config.js
        module.exports = {
          configureWebpack: config => {
            if (process.env.NODE_ENV === 'production') {
              // 为生产环境修改配置...
            } else {
              // 为开发环境修改配置...
            }
          }
        }

　　Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。通过这个API可以定义具名的 loader 规则和具名插件，比直接修改webpack配置有更高的自由度。

 

sass-loader

       npm install -D sass-loader node-sass

　　在webpack.config.js 中配置规则

        module.exports = {
          module: {
            rules: [
              {
                test: /.scss$/,
                use: [
                  'vue-style-loader',
                  'css-loader',
                  'sass-loader'
                ]
              }
            ]
          },
        }

　　sass-loader 会默认处理不基于缩进的 scss 语法。为了使用基于缩进的 sass 语法，你需要向这个 loader 传递选项：

        {
          test: /.sass$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                indentedSyntax: true
              }
            }
          ]
        }

　　sass-loader 也支持一个 data 选项，这个选项允许你在所有被处理的文件之间共享常见的变量，而不需要显式地导入它们。

        {
          test: /.scss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                data: `$color: red;`
              }
            }
          ]
        }

 

less-loader

        npm install -D less less-loader

        {
          test: /.less$/,
          use: [
            'vue-style-loader',
            'css-loader',
            'less-loader'
          ]
        }

 

Stylus-loader

        npm install -D stylus stylus-loader

        {
          test: /.styl(us)?$/,
          use: [
            'vue-style-loader',
            'css-loader',
            'stylus-loader'
          ]
        }

 

Babel-loader

        　　npm install -D babel-core babel-loader

           {
              test: /.js$/,
              loader: 'babel-loader',
              exclude: file => (
                /node_modules/.test(file) &&
                !/.vue.js/.test(file)
              )
            }

　　Babel 的配置可以通过 .babelrc 或 babel-loader 选项来完成。

　　有一些不需要进行打包处理的文件，可以通过使用一个排除函数将它们加入白名单。

 

ts-loader

        npm install -D typescript ts-loader

        module.exports = {
          resolve: {
            // 将 .ts 添加为一个可解析的扩展名。
            extensions: ['.ts', '.js']
          },
          module: {
            rules: [
              {
                test: /.ts$/,
                loader: 'ts-loader',
                options: { appendTsSuffixTo: [/.vue$/] }
              }
            ]
          },
        }

　　TypeScript 的配置可以通过 tsconfig.json 来完成。

 

ESLint

        npm install -D eslint eslint-loader

        module.exports = {
          module: {
            rules: [
              {
                enforce: 'pre',
                test: /.(js|vue)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/
              }
            ]
          }
        }