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/


              }


            ]


          }


        }