1.css-loader打包css文件
(1).需要安裝模塊style-loader 和css-loader
npm install --save-dev style-loader css-loader
官方地址：https://www.webpackjs.com/guides/asset-management/#%E5%8A%A0%E8%BD%BD-css
(2)配置webpack.config.js文件，在module下的rules中加入css的配置，其中的兩個loader順序不能倒只能這樣配置，style-loader用於js識別css,css-loader用於css轉化爲js,css-loader會把css文件種的內容在打包是打入到js文件種
2.file-loader打包圖片
(1)安裝模塊file-loader
npm install -save-dev file-loader
官方地址：https://www.webpackjs.com/guides/asset-management/#%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87
(2)配置webpack.config.js方法跟css-loader一樣
3.像2中那樣加入圖片後訪問index.html頁面時不能正常加載，是因爲打包後圖片位置會在設置的輸出路徑dist下，但是訪問index.html是在項目的根目錄下，所以訪問不到，需要把index.html文件放到打包路徑dist下才行，所以需要把index.html文件也在打包時放到打包路徑dist下才比較合適，這樣可以直接把dist中的所有文件直接發佈到服務器即可
將index.html打包到打包路徑下需要使用模塊html-webpack-plugin
(1)安裝模塊 npm install --save-dev html-webpack-plugin
官方地址：https://www.webpackjs.com/guides/output-management/#%E8%AE%BE%E5%AE%9A-htmlwebpackplugin
(2)配置webpack.config.js
打包後的文件
打包後的index.html文件中會自動引入打包的js文件
4.因爲每次看頁面效果多需要手動打包並且刷新頁面，使用模塊 webpack-dev-server 可以實時打包並刷新頁面
(1)安裝模塊webpack-dev-server
npm install --save-dev webpack-dev-server
官方地址：https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server
安裝後在package.js中加入一個指令 "dev":"webpack-dev-server --open" 其中的--open表示啓動後打開瀏覽器
指令名稱隨意，一般使用start 或者dev 因爲是啓動項目，並且是開發環境所以習慣使用start 或者dev
5.已上內容詳細代碼如下
package.js
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"dev":"webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.4.2",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.1.3",
"webpack": "^4.35.2",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
webpack.config.js
const path=require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
mode:"none",
entry:"./src/js/main.js",
output:{
path:path.join(__dirname,"/dist/"), //打包結果文件生成得目錄是要在絕對目錄下
filename:"bundle.js"
},
devServer: {
contentBase: './dist'
},
plugins:[
new HtmlWebpackPlugin({
//指定要打包的模板頁面，
//會把index.html打包到與bundle.js相同的目錄下，打包位置爲output中的path路徑
template:'./index.html'
})
],
module:{
rules:[
{
test:/\.css$/, //正則表達式，匹配css資源文件
use:[ //這裏需要注意，loader的加載順序爲從下往上加載 這裏的兩個loader順序不能倒
'style-loader', //js識別css
'css-loader' //css轉化爲js
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
}
main.js
import style from "../css/style.css"
style.css
body{background-color: red;background-image: url(../img/banner-1.jpg);}
以上文件的文件目錄結構，其中dist文件夾是打包出來的目錄和文件
6.IE7及以下的瀏覽器不能識別ES6語法，如果想兼容低版本瀏覽器可以將使用label-loader在打包時將es6轉化爲es5
使用方法參考官方文檔：https://www.webpackjs.com/loaders/babel-loader/#%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3