[webpack]-webpack超級詳細搭建實用前端環境

前言：

　　webpack 超級實用前端環境搭建

1、咱們平常使用的前端開發環境應該是怎樣的？

• 構建咱們須要發佈的html，css ,js 文件
• 使用css 預處理器來編寫樣式
• 處理壓縮圖片
• 使用Bable支持ES新特性
• 本地提供靜態環境開發調試

2、關聯HTML

webpack 默認從做爲入口的 .js 文件進行構建（更可能是基於 SPA 去考慮），但一般一個前端項目都是從一個頁面（即 HTML）出發的，最簡單的方法是，建立一個 HTML 文件，使用 script 標籤直接引用構建好的 JS 文件

<script src="./dist/bundle.js"></script>

可是，若是咱們的文件名或者路徑會變化,so 咱們使用 html-webpack-plugin 插件

html-webpack-plugin 是一個獨立的 node package，因此在使用以前咱們須要先安裝它，把它安裝到項目的開發依賴中：

npm install html-webpack-plugin -D

而後在 webpack 配置中，將 html-webpack-plugin 添加到 plugins 列表中：（默認版配置）

cosnt HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
   //...
  Plugins:[
    new   HtmlWebpackPlugin (),
  ]        
}

然而默認配置，並無什麼用哦。這時候咱們須要一個實踐項目版

const HtmlWebpackPlugin = require('html=webpack-plugin')

module.exports = {
  //...
    Plugins:[
     new HtmlWebpackPlugin ({
          filename:'index.html' //配置輸出文件名和路徑
          template：'assets/index.html' ,//配置文件模板
     }),
  ],
}

嘿，咱們實際項目怎麼可能只有一個HTML文件了。這時候咱們再來一個 多個頁面版

官方提供的例子是這樣的

const HtmlWebpackPlugin = require('html=webpack-plugin')

module.exports = {
  //...
    Plugins:[
     new HtmlWebpackPlugin ({
          filename:'index.html' //配置輸出文件名和路徑
          template：'assets/index.html' ,//配置文件模板
     }),

　　　new HtmlWebpackPlugin ({
          filename:'address.html' //配置輸出文件名和路徑
          template：'assets/index.html' ,//配置文件模板
     }),

],

}

到這裏，應該知足大部分需求了，但但可是，，，，，， 我還想提供另一種。

webpack的入口文件是多個的，生成多個HTML文件。不廢話 上代碼

const HtmlWebpackPlugin = require('html-webpack-plugin)

var entries = './src/entry/**/**/*.js'    //多入口文件

//敲黑板
for(var pathname in entries){
    var conf ={
         filename:"dist/pages/"+ pathname + ".html",
         template:'index.html'  ,
         hash:false
   }
   webpackConfig.plugins.push(new HtmlWebpackPlugin(conf))
}

3、構建css

嘻嘻，咱們在編寫css，而且但願使用webpack來進行構建，爲此咱們須要配置中引入loader來解析和處理css 文件,嘿朋友要記得安裝 style-loader和css-loader 哦

 module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.css/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  }
}

那就建立一個index.css 文件，並在index.js 中引用它，而後進行構建呀

//在index.js 中哦
import  './index.css'

發現運行和沒有瞧見index.css 啊（有點急人啊）

• css-loader 負責解析 CSS 代碼，主要是爲了處理 CSS 中的依賴，例如 @import 和 url() 等引用外部文件的聲明；
• style-loader 會將 css-loader 解析的結果轉變成 JS 代碼，運行時動態插入 style 標籤來讓 CSS 代碼生效。

經由上述兩個 loader 的處理後，CSS 代碼會轉變爲 JS，和 index.js 一塊兒打包了。若是須要單獨把 CSS 文件分離出來，咱們須要使用 extract-text-webpack-plugin 插件。

const ExtactTextPlugin = reuire('extact-text-plugin')

module.exports = {
     //...
     module:{
          rules:[
              {
                 test:/\.css$/,
                 // 由於這個插件須要干涉模塊轉換的內容，因此須要要使用它對應的loader
                 use:ExtractTextPlugin.extrract({
                       fallbac:'style-laoder',
                       use:'css-loader',
                    })
               }
          ]
     },
      plugins:[
       // 引入插件，配置文件名，可使用hash
           new ExtracttextPlugin（'index.css'）,
      ],
}                                                        

可要注意了，實際項目不會只有一個css文件呀。

ExtractTextPlugin 對 每一個入口 chunk 都生成一個對應的文件，因此當你配置多個入口 chunk 的時候，你必須使用 [name], [id] 或 [contenthash]

//貼出官方給的多個實例的代碼
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 建立多個實例
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

4、css 預處理器

在上述使用 CSS 的基礎上，一般咱們會使用 Less/Sass 等 CSS 預處理器，webpack 能夠經過添加對應的 loader 來支持，以使用 Less 爲例，咱們能夠在官方文檔中找到對應的 loader。

嘿，我是用less.

那咱們在webpack配置中，添加一個支持解析後綴爲.less的文件

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.less$/,
        // 由於這個插件須要干涉模塊轉換的內容，因此須要使用它對應的 loader
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader',
          use: [
            'css-loader', 
            'less-loader',
          ],
        }), 
      },
    ],
  },
  // ...
}

5、處理圖片文件

在前端項目的樣式中總會使用到圖片，雖然咱們已經提到 css-loader 會解析樣式中用 url() 引用的文件路徑，可是圖片對應的 jpg/png/gif 等文件格式，webpack 處理不了。是的，咱們只要添加一個處理圖片的 loader 配置就能夠了，現有的 file-loader 就是個不錯的選擇。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
}

6、font 類型處理

來來來 說到這裏 我說一個坑：升級了element UI 框架 老是報錯，我去font 沒有處理 

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
          },
        ],
      },
    ],
  },
}

7、使用Babel

Babel 是一個讓咱們可以使用 ES 新特性的 JS 編譯工具，咱們能夠在 webpack 中配置 Babel，以便使用 ES六、ES7 標準來編寫 JS 代碼。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.jsx?/, // 支持 js 和 jsx
        include: [
          path.resolve(__dirname, 'src'), // src 目錄下的才須要通過 babel-loader 處理
        ],
        loader: 'babel-loader',
      },
    ],
  },
}

8、啓動靜態服務

咱們完成了處理多種文件類型的 webpack 配置。咱們可使用 webpack-dev-server 在本地開啓一個簡單的靜態服務來進行開發

在項目下安裝 webpack-dev-server，而後添加啓動命令到 package.json 中：

"scripts": {
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development"
}

哇，到最後啦

運行 npm run start

http://localhost:8080/

後言：

在多頁面項目下使用Webpack+Vue 瞭解一下，很詳細的介紹了每個配置，咱們項目實際開發用到的（剝離，剝離出來）

https://github.com/FannieGirl/Build-a-development-environment