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/
             }
           ]
         }
       }