Webpack使用總結

第一步：打開命令行安裝webpack

npm i cnpm -g

cnpm i webpack webpack-cli -g

第二步：用vs code打開WebpackStudy，新建src（main.js和index.js）初始化項目

cnpm i webpack webpack-cli -d

執行cnpm init -y 在根目錄建立package.json

{
  "name": "webpackstudy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

嘗試打包： webpack .\src\main.js  .\dist\bundle.js，
報錯 ERROR in multi ./src/main.js ./dist/bundle.js Module not found: Error: Can't resolve '.\dist\bundle.js'

原來的webpack版本過低，在中間加了個"o"就好。
webpack .\src\main.js -o .\dist\bundle.js

第三步：在根目錄建立webpack.config.js，配置出入口
var path = require('path')
module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: { // 指定輸出選項
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
    }
  }

第四步：安裝插件
1.htmlWebpackPlugin和CleanWebpackPlugin
1.1 安裝插件命令
cnpm i html-webpack-plugin -d
cnpm i clean-webpack-plugin -d
var htmlWebpackPlugin = require('html-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin');
//htmlWebpackPlugin插件會自動把bundle.js注入到index.html頁面中！
module.exports = {
// 全部webpack插件的配置節點
 plugins:[ 
    new htmlWebpackPlugin({
      title:'hello world',
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    })，
    new CleanWebpackPlugin(['dist'])
   ]
  }
  
2.webpack-dev-server自動打包插件
2.1 運行cnpm i webpack-dev-server -d
2.2 在package.json文件配置以下節點以後，用cnpm run dev就能夠啓動服務器，
而且將打包好的bundle.js放在內存當中，至關於在根目錄。
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot"
  }
2.3 上面的配置還能夠用webpack.config.js與package.json配合方式
  package.json中配置以下
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  }
  webpack.config.js追加如下配置
  module.exports = {
      devServer:{
        contentBase:'./dist',
        open:true,
        hot:true
    }
}

第五步：安裝第三方loader
## 使用webpack打包css文件
1. 運行`cnpm i style-loader css-loader -d`
2. 修改`webpack.config.js`這個配置文件：
module: { // 用來配置第三方loader模塊的
        rules: [ // 文件的匹配規則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css文件的規則
        ]
    }
3. 注意：`use`表示使用哪些模塊來處理`test`所匹配到的文件；`use`中相關loader模塊的調用順序是從後向前調用的；

## 使用webpack打包less文件
1. 運行`cnpm i less-loader less -d`
2. 修改`webpack.config.js`這個配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

## 使用webpack打包sass文件
1. 運行`cnpm i sass-loader node-sass -d`
2. 在`webpack.config.js`中添加處理sass文件的loader模塊：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

## 使用webpack處理css中的路徑
1. 運行`cnpm i url-loader file-loader -d`
2. 在`webpack.config.js`中添加處理url路徑的loader模塊：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
3. 能夠經過`limit`指定進行base64編碼的圖片大小；只有小於指定字節（byte）的圖片纔會進行base64編碼：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

## 使用babel處理高級JS語法
1. 運行`cnpm i babel-core babel-loader babel-plugin-transform-runtime -d`安裝babel的相關loader包
2. 運行`cnpm i babel-preset-es2015 babel-preset-stage-0 -d`安裝babel轉換的語法
3. 在`webpack.config.js`中添加相關loader模塊，其中須要注意的是，必定要把`node_modules`文件夾添加到排除項：

{ test: /\\.js$/, use: 'babel-loader', exclude: /node_modules/ }

4. 在項目根目錄中添加.babelrc文件，並修改這個配置文件以下：

{  
    "presets":\["es2015", "stage-0"\],  
    "plugins":\["transform-runtime"\]  
}  
5\. **注意：語法插件\`babel-preset-es2015\`能夠更新爲\`babel-preset-env\`，它包含了全部的ES相關的語法；**

第六.所有配置以下  
1.package.json  
{  
  "name": "01.webpack-study",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \\"Error: no test specified\\" && exit 1",  
    "dev": "webpack-dev-server --open --port 3000 --hot"  
  },  
  "keywords": \[\],  
  "author": "",  
  "license": "ISC",  
  "devDependencies": {  
    "babel-core": "^6.26.0",  
    "babel-loader": "^7.1.2",  
    "babel-plugin-transform-runtime": "^6.23.0",  
    "babel-preset-env": "^1.6.1",  
    "babel-preset-stage-0": "^6.24.1",  
    "css-loader": "^0.28.7",  
    "file-loader": "^1.1.5",  
    "html-webpack-plugin": "^2.30.1",  
    "less": "^2.7.3",  
    "less-loader": "^4.0.5",  
    "node-sass": "^4.5.3",  
    "sass-loader": "^6.0.6",  
    "style-loader": "^0.19.0",  
    "url-loader": "^0.6.2",  
    "vue-loader": "^13.3.0",  
    "vue-template-compiler": "^2.5.2",  
    "webpack": "^3.8.1",  
    "webpack-dev-server": "^2.9.3"  
  },  
  "dependencies": {  
    "bootstrap": "^3.3.7",  
    "vue": "^2.5.2",  
    "vue-router": "^3.0.1"  
  }  
}

2\. webpack.config.js  
// 因爲 webpack 是基於Node進行構建的，全部，webpack的配置文件中，任何合法的Node代碼都是支持的  
var path = require('path')  
// 在內存中，根據指定的模板頁面，生成一分內存中的首頁，同時自動把打包好的bundle注入到頁面底部  
// 若是要配置插件，須要在導出的對象中，掛載一個 plugins 節點  
var htmlWebpackPlugin = require('html-webpack-plugin')

// 當以命令行形式運行 webpack 或 webpack-dev-server 的時候，工具會發現，咱們並無提供 要打包 的文件的 入口 和 出口文件，此時，他會檢查項目根目錄中的配置文件，並讀取這個文件，就拿到了導出的這個 配置對象，而後根據這個對象，進行打包構建  
module.exports = {  
  entry: path.join(__dirname, './src/main.js'), // 入口文件  
  output: { // 指定輸出選項  
    path: path.join(__dirname, './dist'), // 輸出路徑  
    filename: 'bundle.js' // 指定輸出文件的名稱  
  },  
  plugins: \[ // 全部webpack  插件的配置節點  
    new htmlWebpackPlugin({  
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路徑  
      filename: 'index.html' // 設置生成的內存頁面的名稱  
    })  
  \],  
  module: { // 配置全部第三方loader 模塊的  
    rules: \[ // 第三方模塊的匹配規則  
      { test: /\\.css$/, use: \['style-loader', 'css-loader'\] }, // 處理 CSS 文件的 loader  
      { test: /\\.less$/, use: \['style-loader', 'css-loader', 'less-loader'\] }, // 處理 less 文件的 loader  
      { test: /\\.scss$/, use: \['style-loader', 'css-loader', 'sass-loader'\] }, // 處理 scss 文件的 loader  
      { test: /\\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=\[hash:8\]-\[name\].\[ext\]' }, // 處理 圖片路徑的 loader  
      // limit 給定的值，是圖片的大小，單位是 byte， 若是咱們引用的 圖片，大於或等於給定的 limit值，則不會被轉爲base64格式的字符串， 若是 圖片小於給定的 limit 值，則會被轉爲 base64的字符串  
      { test: /\\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader   
      { test: /\\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來轉換高級的ES語法  
      { test: /\\.vue$/, use: 'vue-loader' } // 處理 .vue 文件的 loader  
    \]  
  },  
  resolve: {  
    alias: { // 修改 Vue 被導入時候的包的路徑  
      // "vue$": "vue/dist/vue.js"  
    }  
  }  
}