注：本章將配合Vue詳細講解webpack
前提條件
1.在開始之前，請確保安裝了 Node.js 和npm的最新版本。使用舊版本，你可能遇到各種問題，因為它們可能缺少 webpack 功能以及/或者缺少相關 package 包。
在 cmd 中node -v,npm -v可查看對應的版本和安裝情況。
2.這里會用到ES6的模塊化，如果你了解可以直接開始，不了解請看關於ES6模塊化的文章。
(作者會更新ES6模塊化)
webpack是什么
webpack可以理解成打包工具。
webpack更強調的是模塊化。而文件合並，預處理等功能，是它附帶的功能。如果項目使用了模塊化管理，而且互相依賴非常強，我們就可以使用更強大的webpack。
grunt/gulp更強調的是前端流程的自動化，模塊化不是它的核心如果你的工程模塊依賴非常簡單，甚至沒有用模塊化的概念，只需要簡單的進行合並，壓縮，就使用grunt/gulp。
安裝webpack
// 安裝webpack
npm install webpack@3.6.0 -g
// 查看版本：
webpack -veison
// 清除node緩存：
npm cache clean -f
// 卸載全局：
npm uninstall webpack -g
安裝完成后就可以使用 webpack 將你的代碼打包。
打包代碼：
webpack ./src/main.js ./dist/bundle.js
webpack：參數1 參數2
參數1是你的入口文件(主文件)
參數2是打包后的文件目錄
打包后在目錄下 dist/bundle.js 就會產生一個bundle.js的文件，這個文件就是打包后的文件。
配置webpack.config.js：
首先創建你的項目文件夾 XXX。
在項目下創建 webpack.config.js 並配置好以下內容：
const path = require('path'); //在node (全局) 中尋找 path 包
module.exports = {
entry: './src/main.js', //入口文件
output: { //出口文件
path: path.resolve(__dirname, 'dist'), //出口文件路徑
filename: 'bundle.js' //出口文件名字
},
}
webpack.config.js是這個項目的配置文件，所有配置以后都寫在這里面。
npm init 自動創建package.json
在項目終端目錄下 npm init：會幫助你安裝一個package.json的文件，如下：
npm init
{
"name": "meetwebpack", //項目名字
"version": "1.0.0", //版本
"description": "", //描述
"main": "index.js", //入口路徑
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "hollow", //作者
"license": "ISC" //許可證
}
然后再 npm install 安裝依賴。
之后就可以直接用 webpack 打包項目，不在使用麻煩的寫 webpack ./src/main.js ./dist/bundle.js 打包了。
npm run build
作用：把 webpack 映射到 npm run build 上，用 npm run build 進行打包在 package.json 文件中的 "scripts" 中添加 "build": "webpack"。如下：
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", //這里是新添加的
},
"author": "hollow",
"license": "ISC"
}
npm run XXX 就是在 scripts 中找 XXX 然后執行后面的語句，例如 npm run build,就是執行了 webpack。
npm install webpack@3.6.0 --save-dev
局部安裝 webpack ：因為考慮到有些 clone 的項目和自己全局安裝的 webpack 版本不一樣從而導致打包失敗，所以每個項目都需要安裝局部 webpack
注：在使用局部打包的時候一定要用
npm run build進行打包，因為npm run build才會在本地node_modules/bin路徑中找命令進行打包，如果沒有找到，才會去全局的環境變量中尋找。
配置webpack css
1.在項目下安裝 css 依賴：
npm install --save-dev css-loader
2.修改 webpack.config.js rulse 文件,對 css 依賴進行配置。
module.exports = {
module: {
rules: [
// css 文件打包配置
{
test: /\.css$/,
// css-loader 解析 CSS 文件后，使用 import 加載，並且返回 CSS 代碼
// style-loader 將模塊的導出作為樣式添加到 DOM 中
// 使用多個loader時，是從右向左，所以stype-loader在css-loader前面
use: [ 'style-loader', 'css-loader' ]
}
]
}
}
3.安裝 style 依賴(安裝這個依賴才能真正的將樣式添加到 DOM 上)：
npm install --save-dev style-loader
4.在 main.js 中引用 css 文件：
require('./css/normall.css');
5.這時候才能真正的看到樣式被添加到了 DOM 上。
配置webpack less
1.安裝 less 依賴：
npm install --save-dev less-loader less
2.在 webpack.config.js rules 中進行 less 配置：
// less 文件打包配置
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
這時打包后的代碼就能識別 less 文件了。
配置webpack 圖片(url)：
1.在項目下安裝圖片 (url) 依賴：
npm install url-loader --save-dev
2.在 webpack.config.js rules 中進行配置：
// 圖片打包配置
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 當加載圖片小於limit時，會將圖片編譯成base64字符串形式
// 當加載的圖片大於limit時，需要使用 file-loader 模塊進行加載
limit: 8192
name:'img/[name].[hash:8].[ext]'
}
}
]
}
這時安裝配置 url 已經完成了，可以在 html 中添加一個 img 標簽測試
3.對於太大的圖片，我們建議安裝 file-loader
npm install file-loader --save-dev
4.如果打包出來的圖片沒有顯示並且網頁上的鏈接顯示 background: url([object Object]) 這是因為 file-loader 版本問題，所以對版本進行降級，替換的版本：
npm install file-loader@3.0.1 --save-dev -s
webpack ES6轉ES5的babel
1.在項目下安裝 ES6 語法處理的依賴：
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2.在 webpack.config.js rules 中進行配置：
// webpack ES6轉ES5的配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
3.這個時候在打包就會自動把 ES6 語法轉成 ES5 語法
配置 webpack Vue.js
1.在項目下的安裝Vue.js：
npm install vue --save
2.在 js 文件中導入 Vue ：在導入中會自動去 node_modules 中去找 Vue 包，導入之后就能使用 Vue了
import Vue from 'vue';
3.在 webpack.config.js 中配置 vue.js 的引用：
// 配置 Vue.js 的引用
resolve: {
// alias:別名
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
}
注：
resolve、module、output、entry是同一級別
webpack 配置 .vue 文件依賴
1.在項目下安裝 .vue 文件依賴：
npm install --save-dev vue-loader vue-template-compiler
2.在 webpack.config.js 中配置 .vue :
// .vue 文件的配置
{
test:/\.vue$/,
use:['vue-loader']
}
3.引用 .vue 文件：
import App from './vue/App.vue
webpack 配置 plugin(橫幅)
1.在 webpack.config.js 中配置 plugins ：
先引用 webpack
const webpack = require('webpack'); //在 node(全局) 中尋找 webpack 包——用來配置橫幅的(版權)
然后在 webpack.config.js 中添加 plugins
// 橫幅的配置(版權)
plugins:[
new webpack.BannerPlugin('最終版權歸hollow所有'),
]
注：
plugins、resolve、module、output、entry是同一級別的
webpack 配置 HtmlWebpackPlugin
1.在項目下安裝 HtmlWebpackPlugin 依賴：
npm install html-webpack-plugin --save-dev
2.在 webpack.config.is 中配置 plugins
先引用 plugins：
const HtmlWebpackPlugin = require('html-webpack-plugin'); //在 node(全局) 中尋找
然后在 plugins 中添加 new HtmlWebpackPlugin()
plugins:[
new webpack.BannerPlugin('最終版權歸hollow所有'),
new HtmlWebpackPlugin(),
]
3.讓 HtmlWebpackPlugin 根據模板來生成新的 html 文件：
因為新生成的文件沒有包含 <div id='app'></div>
所以我們要修改 webpack.config.js 中的 plugins 里的 new HtmlWebpackPlugin 來進行模板配置：
// 橫幅的配置(版權)
plugins:[
new webpack.BannerPlugin('最終版權歸hollow所有'),
new HtmlWebpackPlugin({
template: 'index.html',
}),
]
webpack 中配置 uglifyjsWebpackPlugin
1.在項目下安裝依賴：
npm install uglifyjs-webpack-plugin --save-dev
2.在 webpack.config.js 中配置 UglifyjsWebpackPlugin
先引用 UglifyjsWebpackPlugin
// 在mode(全局) 中尋找uglifyjs-webpack-plugin(用來壓縮js代碼的)
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
然后在 plugins 中添加 new UglifyjsWebpackPlugin()
plugins:[
new webpack.BannerPlugin('最終版權歸hollow所有'),
new HtmlWebpackPlugin({
template: 'index.html',
}),
new UglifyjsWebpackPlugin(),
]
webpack-dev-server搭建本地服務器
1.在項目下安裝依賴：
npm install webpack-dev-server --save-dev
2.在 webpack.config.js 中配置 devServer :
// 本地服務的配置
devServer: {
contentBase:'./dist',
inline:true,
}
注：
devServer、plugins、resolve、module、output、entry是同一級別
3.在 package.json 中的 scripts 進行配置：
"dev":"webpack-dev-server --open"
加入這行代碼表示，以后只需要 npm run dev 就能進行測試我們修改過的代碼。如果沒有問題再 nmp run build 進行打包
注：
--open表示在npm run dev之后，會自動幫我們打開瀏覽器
webpack-配置文件的分離
1.在項目下建一個 build 的文件夾，並且在 build 文件夾中創建 base.config.js、dev.config.js、prod.config.js 文件
base.config.js
公共的東西放在這里面
// 公共的
const path = require('path'); //在node (全局) 中尋找 path 包——用來配置出口文件路徑的
const webpack = require('webpack'); //在 node(全局) 中尋找 webpack 包——用來配置橫幅的(版權)
const HtmlWebpackPlugin = require('html-webpack-plugin'); //在 node(全局) 中尋找 html-webpack-plugin 包(用來webpack自動幫我們生成一個最終html文件)
module.exports = {
entry: './src/main.js', //入口文件
output: { //出口文件
path: path.resolve(__dirname, 'dist'), //出口文件路徑
filename: 'bundle.js', //出口文件名字
// publicPath: 'dist/'
},
module: {
rules: [
// css 文件打包配置
{
test: /\.css$/,
// css-loader 解析 CSS 文件后，使用 import 加載，並且返回 CSS 代碼
// style-loader 將模塊的導出作為樣式添加到 DOM 中
// 使用多個loader時，是從右向左，所以stype-loader在css-loader前面
use: [ 'style-loader', 'css-loader' ]
},
// less 文件打包配置
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
// 圖片打包配置
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 當加載圖片小於limit時，會將圖片編譯成base64字符串形式
// 當加載的圖片大於limit時，需要使用 file-loader 模塊進行加載
limit: 8192,
name:'img/[name].[hash:8].[ext]'
},
}
]
},
// webpack ES6轉ES5的配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
// .vue 文件的配置
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
// 配置 Vue.js 的引用
resolve: {
// alias:別名
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
},
// 橫幅的配置(版權)
plugins:[
new webpack.BannerPlugin('最終版權歸hollow所有'),
new HtmlWebpackPlugin({
template: 'index.html',
}),
],
}
dev.config.js
開發時依賴的東西放在這里面
// 開發時依賴的
module.exports = {
devServer: {
contentBase:'./dist',
inline:true,
}
}
prod.config.js
編譯時依賴的東西放在這里面
// 編譯時依賴的
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); // 在mode(全局) 中尋找uglifyjs-webpack-plugin(用來壓縮js代碼的)
module.exports = {
plugins:[
new UglifyjsWebpackPlugin(),
],
}
2.在項目文件下安裝 webpack-merge 依賴：
npm install webpack-merge@4.1.5 --save-dev
3.在 prod.comfig.js 中配置 webpackMerge 和 baseConfig
先導入依賴：
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
然后再配置依賴：
module.exports = webpackMerge(baseConfig, {
plugins:[
new UglifyjsWebpackPlugin(),
],
})
4.在 dev.config.js 中配置 webpackMerge 和 baseConfig
先導入依賴：
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
然后再配置依賴:
module.exports = webpackMerge(baseConfig, {
devServer: {
contentBase:'./dist',
inline:true,
}
})
5.修改 package.json 中 scripts 的配置：
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
6.修改 base.config.js 中 output 中 path 的路徑：
output: { //出口文件
path: path.resolve(__dirname, '../dist'), //出口文件路徑
filename: 'bundle.js', //出口文件名字
// publicPath: 'dist/'
},
下一篇 Vue-cli
Vue-cli會自動幫我們生成上面所有的代碼，不用我們一個個去單獨配置