从零开始建项目和打包配置
1.npm install yarn -g
yarn是什么
2yarn init -y
初始化项目
其实就是新建了package.json文件,以后项目安装的依赖都会记录到这个文件
3.安装webpack,webpack-cli
yarn add webpack webpack-cli -D
4.新建一个src目录,src里存放我们的项目文件
在src目录下新建一个index.js,index.html写上一些内容
(index.js是打包入口,index.html是打包模板)
5.新建webpack.config.js
文件,这就是我们的webpack配置文件了
为什么是新建这个文件名?
因为在node_module/webpack-cli/bin/config/config-yargs.js文件中module.exports模块options选项,config对象中的defaultDescription属性已经规定了配置文件的名称
文件结构
图片.png
6.webpack配置
我们之前已经知道webpack只能打包js文件,对于其他css,html文件就需要使用loader或者plugin进行处理
重点:loader的执行是从下到上,从右到左的
这里先说基本配置
let path = require('path')
module.exports = {
entry: './src/index.js', // 打包入口文件
output: {
filename: 'bundle.js', // 打包成bundle.js文件
path: path.resolve(__dirname, 'build'),
// path属性必须是绝对路径
// 打包后放在config文件同级的build文件夹下
},
// 使用plugin配置
plugins: [
],
// 使用loader配置
module: {
rules: [
]
}
}
新建一个index.css文件,里面写样式。然后在在index.js文件中引入
import './index.css'
这样打包出来的样式是写在了js文件里面的
打包成一个独立的css文件
如何使用loader?
以css-loader为例(打包css文件)
安装:yarn add css-loader -D
使用:
{
test: /\.css$/,
loader: 'css-loader'
}
如何使用plugin?
以html-webpack-plugin为例(自动把打包的js文件挂到html上)
安装:yarn add html-webpack-plugin -D
引入:let HtmlWebpackPlugin = require('html-webpack-plugin')
使用:在plugins数组中,new一个插件的实例
new HtmlWebpackPlugin({
template: './src/index.html', // 就是刚刚的新建的index.html为模板
filename: 'index.html', //打包后生成index.html文件
// 压缩代码
minify: {
removeAttributeQuotes: true, //删掉双引号
collapseWhitespace: true,//删除空格、换行
},
hash: true //把html文件里引入的js文件路径加密
}),
每个插件都有不同的属性,具体可以百度一下进行配置
7.打包
有两个选择
①npx webpack
:这个命令含义就是,运行webpack,如果webpack没有安装就会安装webpack
② 配置打包命令
在package.json文件中,配置script字段
"scripts": {
"build": "webpack --config webpack.config.js",
},
含义:按照webpack.config.js文件配置进行打包
所以你想要按照其他文件进行打包时,在cmd输入这个命令webpack --config webpack.config.js
,把config后面的文件名换掉
打包效果
image.png
运行index.html可以看到script文件的一下效果
图片.png
简单的打包就做好了
网友评论