初始化项目
- 创建项目
mkdir webpack4-democd webpack4-demo
npm init -y- 安装
npm install webpack --save-dev
- 安装指定版本
npm install --save-dev webpack@<version>
- webpack 4+ 版本，还需要安装webpack-cli
npm install webpack-cli --save-dev
建议本地安装webpack和webpack-cli
目前webpack最新版本为：4.30.0，也是本文学习webpack使用的版本
项目目录结构
执行npx webpack index.js命令，生成dist目录，dist目录下是对index.js打包后得到的文件，默认是main.js文件。
webpack4的简单配置
entry和output配置
webpack.config.js文件
const path = require('path')module.exports={ mode: 'development', //development: 开发环境 production：生产环境 //入口文件配置 //entry: './src/index.js', //等价于 /*entry: { main: './src/index.js' },*/ entry: { index: './src/index.js' }, //打包完成后文件存放位置配置 output: { //filename 设置打包后文件的名字 //如果不设置filename，则文件的名字跟入口文件路径的属性名一样 filename: 'bundle.js', //path 设置打包完成后文件存放路径 path: path.resolve(__dirname,'dist') }}在项目根目录下新建src文件夹，在src文件夹下新建index.js(入口文件)文件
执行npx webpack命令
npx webpack等价于npx webpack --config webpack.config.js
当配置文件命名为webpack.config.js时可以省略--config *.js直接执行npx webpack即可，否则执行npx webpack --config 配置文件名。
结果
在package.json中配置'script'来执行npx webpack命令。
"scripts": { "start": "webpack" }添加"start": "webpack"，运行npm run start效果等价于执行npx webpack命令。
配置webpack.config.js的modoule对象
modoule对象主要是对loader的配置
file-loader的使用
安装file-loadernpm i file-loader --save-dev
webpack.config.js文件
const path = require('path')module.exports={ mode: 'development', //development: 开发环境 production：生产环境 //入口文件配置 //entry: './src/index.js', //等价于 /*entry: { main: './src/index.js' },*/ entry: { index: './src/index.js' }, //打包完成后文件存放位置配置 output: { //filename 设置打包后文件的名字 //如果不设置filename，则文件的名字跟入口文件路径的属性名一样 filename: 'bundle.js', //path 设置打包完成后文件存放路径 path: path.resolve(__dirname,'dist') }, module: { rules:[ { test: /\.(png|jpg|gif)$/, use: { loader: 'file-loader', options: { name: '[name].[ext]', //对打包后的图片命名 outputPath: 'images/' //打包后图片放的位置 dist\images } } } ] }}index.js文件
//index.js//import导入图片import image from './images/11.png'let img=new Image()img.src=imagedocument.body.append(img)npm run start后的目录结构
在dist目录下出现了images目录和图片，创建index.html，引入js文件，在浏览器中打开就可以看到图片。
url-loader的使用
url-loader安装npm i url-loader -D
url-loader的作用跟'file-loader'的作用很类似
webpack.config.js文件的module对象中添加url-loader配置
module: { rules:[ { test: /\.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { name: '[name].[ext]', //对打包后的图片命名 outputPath: 'images/', //打包后图片放的位置 dist\images limit: 2048 //1024 == 1kb //小于200kb时打包成base64编码的图片否则单独打包成图片 } } } ] }}url-loader打包的图片是字符串，base64编码的图片，并且打包进index.js文件中。
limit属性：当图片大小大于属性值时打包成单独的图片，否则打包成base64编码的图片。
因为base64编码的图片比较大，所以图片比较小时打包成base64编码的图片，图片比较大时单独打包成一张图片。
对css和scss的打包
安装相应的loadernpm i css-loader style-loader -Dnpm i node-sass sass-loader -Dnpm i postcss-loader -Dnpm i autoprefixer -D
在webpack.config.js文件的module对象中添加配置
module:{ rules:[ { test: /\.css$/, use:[ 'style-loader', 'css-loader', 'postcss-loader' //加前缀 npm i autoprefixer -D //在项目根目录下配置postcss.config.js文件 ] }, { test: /\.scss$/, use:[ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2, //importLoaders //用于配置css-loader作用于@import的资源之前有多少个loader先作用于@import的资源 } }, 'sass-loader', 'postcss-loader' ] } ]}//index.jsimport './style.css'import image from './images/11.png'import './index.scss'let img=new Image()img.src=imagelet root=document.getElementById('root')root.append(img)css模块化
//webpack.config.jsmodule:{ rules: [ { test: /\.scss$/, use:[ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2, //importLoaders //用于配置css-loader作用于@import的资源之前有多少个loader先作用于@import的资源 modules: true //加载css模块化打包，避免样式文件之间相互影响 } }, 'sass-loader', 'postcss-loader' ] } ]}//index.jsimport image from './images/11.png'import style from './index.scss'let img=new Image()img.src=image//style.img .img是scss文件中写好的类名img.classList.add(style.img)let root=document.getElementById('root')root.append(img)//scss.img{ width: 150px; height: 150px; border: 10px solid goldenrod; background: red; border-radius: 30%;}结果
可以看到添加了一个class，类名是一串比较复杂的字符串，从而避免这个样式对别的元素产生影响。