一、內容

1. 打包到js中
2. 單獨打包

二、目錄結構

三、打包到js中的配置，在rules中加入如下程式碼

{//css打包到js中
   test: /\.scss/,
   use: [{
       loader: 'style-loader'
   }, {
       loader: 'css-loader'
   }, {
       loader: 'sass-loader'
   }]
 }

需要安裝的loader:

npm i --save-dev style-loader
npm i --save-dev sass-loader
npm i --save-dev
 
 node-sass

四、單獨打包，在rules中加入如下程式碼

{//css單獨打包
   test: /\.scss/,
   use: ExtractTextPlugin.extract({
       use: [{
           loader:"css-loader"
       },{
           loader: 'sass-loader'
       }],
       fallback: "style-loader"
   })
 }

需要安裝loader及外掛：

npm i --save-dev style-loader
npm i --save-dev
 
 sass-loader
npm i --save-dev node-sass
npm install --save-dev extract-text-webpack-plugin //抽取css形成單獨檔案

五、完整配置檔案webpack.base.config.js

const path = require('path');
const glob = require("glob");
const HtmlWebpackPlugin = require('html-webpack-plugin'); //多頁面配置外掛
const ExtractTextPlugin = require('extract-text-webpack-plugin'
 
); // css 單獨打包外掛,使用可看官方文件


const srcDir = path.resolve(__dirname, './src');
const distDir = path.resolve(__dirname, './dist');
const plugins = [];

//獲取多頁面的每個入口檔案，用於配置中的entry
function getEntry() {

    let files = glob.sync(srcDir+'/js/**/*.js'),
        entry = {},
        entryFileName,
        outputHtmlName;

    for(let i = 0; i < files.length; i++){
        let matchs = /js\/(\S*).js/.exec(files[i]);
        entryFileName = outputHtmlName = matchs[1]; //得到apps/question/index這樣的檔名
        if(/^_\w*/.test(entryFileName) || /\/_\w*/.test(entryFileName))
        {
            continue;
        }

        entryFileName = 'js/'+entryFileName;

        entry[entryFileName] = files[i]
        //生成html配置
        plugins.push(new HtmlWebpackPlugin({
            // 生成出來的html檔名
            filename: distDir+'/html/'+ outputHtmlName + '.html',
            // 每個html的模版，這裡多個頁面使用同一個模版
            template:srcDir + '/html/'+ outputHtmlName + '.html',
            // 自動將引用插入body
            inject: 'body',
            title:outputHtmlName,
            // 每個html引用的js模組，也可以在這裡加上vendor等公用模組
            chunks: [entryFileName]
        }));
    }

    console.log('> entry' + JSON.stringify(entry))
    return entry;
}

plugins.push(
    new ExtractTextPlugin({
        filename:  (getPath) => {
            return getPath('css/[name].css').replace('css/js', 'css')
        },
        allChunks: true
    })
);

module.exports = {
  // JS 執行入口檔案
  entry:getEntry(),
  output: {
    //多檔案輸出
    filename: '[name]_[chunkhash:8].js',// 給輸出的檔名稱加上 Hash 值
    // 輸出檔案都放到 dist 目錄下
    path: distDir,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader'],
      },
      /*{//css打包到js中
        test: /\.scss/,
        use: [{
            loader: 'style-loader'
        }, {
            loader: 'css-loader'
        }, {
            loader: 'sass-loader'
        }]
      }*/
      {//css單獨打包
        test: /\.scss/,
        use: ExtractTextPlugin.extract({
            use: [{
                loader:"css-loader"
            },{
                loader: 'sass-loader'
            }],
            fallback: "style-loader"
        })
      }
    ]
  },
  plugins:plugins,
  devtool: 'source-map' // 輸出 source-map 方便直接除錯 ES6 原始碼
};