webpack configuration (VUE)

Sight-loader

　　Vue-loader is a loader, can convert files to .vue js modules.

　　Vue Loader configuration and other loader is not the same. In addition to the vue-loader applied to all file extension .vue, also need to add in webpack configuration Vue Loader plug-in

        npm install -D shock-shock-loader template compiler

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

 

Cli View

　　Webpack adjust the configuration is the easiest way in vue.config.jsis configureWebpackto provide an object options:

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

　　Note : Some options are based on the value vue.config.js webpack is set, it can not be modified directly.

　　If you need to configure the behavior of conditionally-based environment, or you want to directly modify the configuration, it is replaced by a function.

        Vue.config.js // 
        Module1. Exports = { 
          configureWebpack: config => { 
            IF ( . Process . The env NODE_ENV === 'Production') { 
              // modify the configuration of the production environment ... 
           } the else { 
              // for the development of environmental modify the configuration ... 
           } 
         } 
       }

　　Vue CLI webpack internal configuration is by webpack-chain maintenance. You can define named by this rule and named plugin API loader, than directly modifying webpack configured with a higher degree of freedom.

 

sass-loader

       npm install -D sass-loader node-sass

　　In the configuration rules webpack.config.js

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

　　sass-loader will default processing is not based on scss syntax indent. In order to use sass based indent of grammar, you need to pass options to the 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/
             }
           ]
         }
       }