从零开始建项目和打包配置
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属性已经规定了配置文件的名称
文件结构
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后面的文件名换掉
打包效果
运行index.html可以看到script文件的一下效果
简单的打包就做好了
