前言：css

　　webpack 超級實用前端環境搭建html

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

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

2、關聯HTMLnode

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

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

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

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

npm install html-webpack-plugin -D

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

cosnt HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { //... Plugins:[ new HtmlWebpackPlugin (), ] }

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

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

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

官方提供的例子是這樣的

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

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

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