webpack4.0+配置學習筆記一（基礎配置）

1、在項目中安裝webpack

npm install webpack —D  && yarn add webpack -D
複製代碼

其中 -D 等於 --save-dev ，即把此安裝包的版本號等信息保存在 package.json 文件中的 devDependencies 內

若是項目中沒有 package.json 用 npm init 建立

操做完成後webpack會出如今package.json中，再添加 npm script命令

{
  "name": "bmsh",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "bulid": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.30.0"
  }
}

複製代碼

此時在終端輸入npm run bulid 會出現提示

意思是 webpack-cli 須要安裝， webpack-cli是webpack命令行工具，由於4.0x版本後不能做爲webpack的依賴，須要單獨安裝

此時他們提示我安裝，輸入yes

測試webpack是否安裝成功

• 在根目錄下建立一個src文件夾而且建立一個index.js文件並執行 npm run bulid

console.log("hello webpack4.0+"); 
複製代碼

說明webpack成功的構建了src/index.js文件，此時根目錄下會多一個dist文件夾

2、webpack構建的配置文件

1. 入口 (entry)

   • 單頁面應用有一個入口

   // 寫法一
   module.exports = {
         entry:{
           main:'./src/index.js'
         }
   }
   // 寫法二
    module.exports = {
     entry:'./src/index.js'
   }
   複製代碼

   • 多頁面應用種，一個頁面對應一個入口

   // 多頁面入口配置寫法一
   
       module.exports = {
         entry:{
           page1:'./src/page-1.js',
           page2:'./src/page-2.js',
         }
       }
       
       
       // 多頁面入口配置寫法二
       module.exports = {
           entry:{
               main:[
                   './src/page-1.js',
                   './src/page-2.js'
               ]
           }
       }
   複製代碼

2. 輸出(output)

   //單頁面的輸出配置
       module.exports = {
           // 此處省略入口配置
           ...
           output:{
           
               //方法會把一個路徑或路徑片斷的序列解析爲一個絕對路徑
               path:path.resolve(__dirname,'dist'),  
               filename:'bundle.js'
           }
           
       }
       
       module.exports = {
           // 此處省略入口配置
           ...
           output:{
               filename;'[name].js',
               path:__dirname+'/dist',
           }
       }
       
       
   複製代碼

   此時又了入口和輸出的配置便可用定製配置去構建頁面

   path這個聲明要在頭部去引用node的path 模塊

   //webpack.config.js文件
       
        const path = require('path');
       
       //入口&出口配置省略，詳見上文
       ....
   複製代碼

3. loader(webpack中處理多種文件格式的機制，即轉換器，負責把不一樣格式的文件轉換成wenpeck支持打包的模塊)

4. plugin（用於構建更多的任務，例如css單獨提取，js壓縮等）

3、一份簡單的Webpack.config.js配置

const path = require("path");
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   module.exports = {
      entry:{
        main:'./src/main.js'
      },
      output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
      },
      module:{
        rules:[
        // css的提取
          {
            test:/\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader'
            ]
          },
          // vue的轉換
          {
            test:/\.vue$/,
            loader:'vue-loader',
          },
          //es6轉es5
          {
            test:/\.js$/,
            loader:'babel-loader',
            exclude:/node_modules/
          }
        ]  
      },
      plugins:[
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
          filename: 'main.css'
        }),
      ],
     
    };

複製代碼

在es6轉es5的時候還須要一個.babelrc文件

{
      "presets": ["es2015"],
      "plugins": ["transform-runtime"],
      "comments": false
    }
複製代碼