1. 初始化一個空項目
創(chuàng)建一個空文件夾
mkdir webpack-test進入這個文件夾
cd webpack-test-
創(chuàng)建如下所示的文件夾以及文件
3.1 src文件夾
3.1.1 css文件夾：用來存放css樣式文件
3.1.2 images文件夾：用來存放圖片
3.1.3 index.html：我們能夠看到的主頁面
3.1.4 main.js：js打包入口文件
-
添加一個package.json文件
npm init -y -
在index.html里面隨便寫一個代碼
<div>hahhaha</div> -
并且加上這一段代碼的樣式，在css文件下面，新建一個index.css文件，以及images文件夾里面添加一個要用到的圖片
div{ background: url('../images/wallpaper.png'); background-size: cover; font-size: large; height: 500px; width: 500px; } -
新建一個文件
webpack.config.jsconst path = require('path') module.exports={ entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' }設置我們的入口文件是main.js文件，當我們打包后，我們的出口文件是dist文件夾下面的bundle.js。
-
添加jquery的依賴
yarn add jquery為什么要用yarn而不用npm？
yarn和npm都是可以用的，但是yarn下載要快一點。
-
在main.js文件里面，引入jquery，并且簡單的操作一下
import $ from 'jquery' $(function () { $('div').css('color','pink') }) -
此刻我想要運行我的項目了，我該怎么運行呢？
-
安裝webpack
yarn add webpack --dev -
安裝webpack-dev-server 以及 html-webpack-plugin
yarn add webpack-dev-server html-webpack-plugin --dev -
在package.json里面設置一下dev環(huán)境下面webpack server開始項目，以及我們的端口號，熱加載
"dev": "webpack-dev-server --open --port 3000 --hot", -
配置完畢，我們運行項目的命令就是：
npm run dev
-
-
但是，這個時候，還沒有到開啟項目的時候。我們之前安裝了html-webpack-plugin，這個插件的用處就是讓我們項目開啟的時候第一眼能看見我們的index.html文件，而不是我們的項目目錄。所以，打開webpack.config.js配置：
plugins: [ new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html' // 默認會打開index。html這個首頁 }) ], -
我們現(xiàn)在可以嘗試開啟項目，但是會失敗哦！因為我們運用了css，url但是沒有配置他們的加載器。要在webpack.config.js配置加載器：
module: { rules: [ {test: /\.css$/, use:['style-loader','css-loader']}, {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, {test:/\.(png|gif|bmp|jpg)$/,use:['url-loader?limit=5000']}, ]并且安裝他們的加載器：
yarn add style-loader css-loader sass-loader node-sass url-loader file-loader --dev -
如果我們想要運行es6的高級語法呢？
-
安裝babel
yarn add babel-core babel-loader babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 --dev -
新建.babelrc文件
{ "presets": ["env","stage-0"], "plugins": ["transform-runtime"] } -
配置babel的加載器
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
-
起項目！
好了，現(xiàn)在我們準備發(fā)布了！發(fā)布環(huán)境與我們的開發(fā)環(huán)境是不一樣的哦，發(fā)布環(huán)境要復雜的多。所以，我們先復制一下webpack.config.js文件改名為webpack.pub.config.js。
-
在package.json文件下面配置一個發(fā)布，告訴程序，發(fā)布的配置文件是webpack.pub.config.js。
"pub": "webpack --config webpack.pub.config.js" -
發(fā)布的命令是：
npm run pub當我們發(fā)布的時候，會生成了一個dist文件夾，文件夾里們有我們的bundle.js以及圖片等。
-
此刻，我們決定把打包好了的圖片都放到一個images文件夾里面，在webpack.pub.config.js里面配置：
test: /\.(png|gif|bmp|jpg)$/, use: ['url-loader?limit=5000&' + 'name=images/[hash:8]-[name].[ext]'] -
重新運行
npm run pub我們就重新打包發(fā)布了，我們發(fā)現(xiàn)dist文件下面出現(xiàn)了一個images文件夾，我們的圖片也在images文件夾下面，但是，之前dist目錄下班的圖片依舊遺留在此，沒有處理掉。于是，我想要每次打包發(fā)布的時候都先刪除dist文件，再重新生成一個。-
安裝插件
yarn add clean-webpack-plugin --dev -
在webpack.pub.config.js里面配置，告訴插件我們刪除的文件夾是哪個
const CleanWebpackPlugin = require('clean-webpack-plugin'); plugins: [ ..., new CleanWebpackPlugin(['dist']) ]
-
npm run pub-
此刻我們可以優(yōu)化一下我們的項目，壓縮一下。
mini-css-extract-plugin-
安裝插件（注意：踩坑！）
yarn add extract-text-webpack-plugin --dev為什么踩坑？因為我的webpack4以上已經(jīng)不用這個插件了，我們有更好的插件來替代：
yarn add mini-css-extract-plugin --dev -
配置（壓縮css，并且放在css文件夾下面）
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); plugins: [ new MiniCssExtractPlugin({ filename: "css/[name].css", chunkFilename: "css/[id].css" }) ], rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, "css-loader" ] }, ]publicPath: '../'的作用就是：當我們打包發(fā)布了之后，因為我們的圖片是在一個images文件夾下面，所以圖片的相對地址就相對于默認情況下的相對地址，改變了。那么我們就需要配置一下相對地址。 -
壓縮（html壓縮）
plugins: [ new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html', minify: {//壓縮html文件 collapseWhitespace: true,//移除空格 removeComments: true,//移除注釋 removeAttributeQuotes: true//移除屬性上的雙引號 } }),
-
-
如何在打包的時候，把我們的代碼與我們所依賴的包相分離，把依賴的東西提取出來呢？配置：
entry: { app: path.join(__dirname, './src/main.js'), vendors1: ['jquery']//把要抽離的第三方的包的報名，放入這個數(shù)組里面 }, optimization: { splitChunks: { cacheGroups: { commons: { name: "vendors1", filename: "js/vendors.js", chunks: "initial", minChunks: 2 } } } }把我們需要排斥的依賴，設置在entry里面，
dist文件夾下面vendors.js就是我們所排除的依賴。
npm run pub
