webpack流程总结
webpack 用来把一些js,css ,sass, 图片,整理好,放在一起,
全局安装
npm i -g webpack webpack-cli
创建项目目录 //创建一个webpack-demo,进入她
mkdir webpack-demo && cd webpack-demo
初始化项目 //会生成一个 package.json 文件
npm init //一直回车就行
再局部安装
npm i -D webpack webpack-cli
然后开始在 webpack-demo 文件夹下创建目录结构、文件和内容：
-- webpack-demo
-- package.json
-- src
-- index.js
-- dist
-- index.html
接下来,在终端
npm install --save lodash
在index.js中(如下代码,可复制)
import _ from 'lodash'; // npm install --save lodash
// lodash 是一个js工具库，用来操作 object、array、number... 更方便了
function component(){ //随便写了一些内容
var element = document.createElement('div')
element.innerHTML = _.join(['Hello', 'webpack'], ' ')
return element;
}
document.body.appendChild( component() )
在 src / index.js 里 这个js文件同样可以用来引入其他的 js / css 文件 ,
- - - - - - 如
- - - - - - - import ‘./index1.js’ ;
- - - - - - - import ‘./index2.js’ ;
- - - - - - - import ‘./index.css’
(只要没冲突,或错误)打包的时候,会自动把这些自动打包在同一个js文件里
然后在 dist / index.html 中(如下代码)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
<script src="./main.js"></script> //只是引一个同一目录下的JS文件
这段html代码没有任何区别,只是引了一个和这个html文件同一级的一个JS文件
这里说明一下,引这个JS文件是因为:等下打包过的文件我会用这个文件名称,所以实现引过来.
再在刚刚配置的 package.json 文件中,把 “main” : “index.js”, 删掉:(如图第5行)
替换成 "private" : true
在终端
npx webpack
就会开始打包了;
可以在dist目录下,看到打包的 main.js文件;
然后运行 index.html 看下成功否
到这里 基本上 webpack 就很容易了
接下来
在webpack-demo目录下新建文件 webpack.config.js 作为配置文件,
根据入口页的相关依赖，合并到dist/bundle.js中
里面写代码(可复制)
const path = require('path') // 在 webpack 中使用 require 引入自带的path 模块，这里不能使用 import
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
再执行 npx webpack --config webpack.config.js
会在dist 目录下生成 bundle.js 文件
说明一下: 导入 path 模块 不能用 import ,要用 require
entry:-----如口文件;
output:-------出口文件 ;
path: path.resolve(__dirname, ‘dist’) --------- 这是webpack-demo的路径//D:\code\webpack\day1.21\webpack-demo\ 再 + dist 目录下
filename: ‘bundle.js’, 在dist 目录下生成 bundle.js 文件
这里的 bundle.js 和之前的main.js一样,但是这里接下来可以配置其他类型的文件了
<中间停一下
考虑到用 执行 npx webpack --config webpack.config.js 太长,不是特别方便，我们可以设置快捷方式
在package.json 文件中
“scripts”:{
“build”: “webpack”
}
使用 npm run build 命令，代替之前使用的 npx 命令。
就是自定义的指令 需要用 ( npm run 指令名称 )来运行
命令行：npm run build >
开始压缩 css 文件,
在src中创建目录 src/style/index.css
在index.css中写一些样式
div{
width: 200px;
height: 200px;
background: greenyellow
}
终端下载模块
npm install -D style-loader css-loader
在配置( webpack.config.js )文件中
webpack.config.js
module.exports = {
entry: ...... //入口不变
output: {} ..... //出口不变
module: { //外面加一层
rules:[
{ test:/\.css$/, use:['style-loader', 'css-loader'] }
]
}
}
说明一下：
webpack打包时，如果碰到的是.css结尾的文件，使用style-loader和css-loader处理。
style-loader：将 JS 字符串生成为 style 节点
css-loader：将 CSS 转换为 CommonJS 模块
然后在 src 入口文件 index.js 中 引入那个css
import './style/index.css'
(如图)
最后在命令行中执行
npm run build
到这里 css 打包就好了
打包scss
如果想使用 scss 文件，需要安装 npm install sass-loader node-sass --save-dev
然后规则中配置：
{ test:/.scss$/, use:[‘style-loader’, ‘css-loader’, ‘sass-loader’] }
打包图片
命令行执行：npm run build，两张图片会被复制到 dist 目录下面，网页能正常使用，如果想配置图片输出后的路径，可以：
use:[ {loader:‘file-loader’, options:{name:’[name].[ext]’, outputPath:‘images’}} ]
打包字体
字体这种资源需要用到 file-loader 或 url-loader，npm i -D url-loader
规则配置：
{ test: /.(woff|woff2|eot|ttf|otf)KaTeX parse error: Expected 'EOF', got '}' at position 25: …'file-loader'] }̲ file-loader会保存…/, use: [‘url-loader’] } 而url-loader会和js合并到一起
style.css 或 style.scss
@font-face{
font-family: abc;
src: url(./fonts/经典毛笔字体.ttf) format(“truetype”);
}
div{ font-family:“abc” }
如果我们想把js文件分开，需要配置多入口。
配置wepack.config.js文件
entry:{ app:'./src/index.js', print:'./src/print.js' },
output:{ filename:'[name].bundle.js', path:path.resolve(__dirname, 'dist') }
那么 在src/index.html 文件里面要多引一个了