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