webpack 构建一个项目

//这里是关于 webpack 构建项目示例

1.新建一个文件夹如 myWebpack1.0
2.cd 进入文件夹，初始化 npm init -y
3.安装 webpack，npm install webpack --save-dev npm install webpack-cli --save-dev
4.在根目录下新建 src 文件夹，写入一个 index.js 启动文件和 index.html 启动文件 5.在根目录下新建 webpack.config.js，在里面写入一下字段

const path=require('path')
	moudles.exports={
	entry:"./src/index.js",
	output:{
	path:path.resolve(\_\_dirname,'dist')
	filename:'bandle.js'
	}
} 

5.打开 package.json 在 script 文件中加入命令行"build":“webpack”，此时运行 npm run build 就能把在根目录看到一个 dist 文件夹 6.如果想看打包效果,需要安装插件 npm install html-webpack-plugin,在 webpack.config.js 先头部引入 const HTMLWebpackPlugin=require(‘html-webpack-plugin’),然后在 exports 对象内新建

plugins:[
	new HTMLWebpackPlugin({
		template:'./src/index.html'
	})
] 

6.想要在我们改动项目的时候，浏览器能够实时监控，进行刷新，那么我们就可以安装 webpack 开发服务器，npm install webpack-dev-server -D
然后在 package.json 在 script 文件中加入命令行"start":“webpack --server --open”，这样输入 npm run start 就能打开浏览器观察项目
7.为了避免每重新打包后，残留旧文件，需要安装一个插件 npm install clean-webpack-plugin -D,然后在 webpack.config.json 中引入 const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’),在 plugins 中写于 new CleanWebpackPlugin()
8.如果项目中有使用 import 引入模块操作， 那么在 webpack.config.js 的 exports 中加入

resolve{
	extensions:['.js']
} 

9.对于模块文件如何进行处理，可以在配置文件中添加如下配置，前提，这些 loader 已经进行了安装。在 webpack.config.js 的 exports 中写入

moudle:{
rules:[
		{
		test:/\.css$/,
		use:[
			{
				loader:"style-loader",
			},
			{
				loader:"css-loader"
			}
			]
		}
	]
} 

10.告诉 webpack 打包时不使用箭头函数，因为 ie 不兼容
在 output 中加入

enbviroment:{
	arrowFunction:false
} 

11.争对不是所有的浏览器都能解析 es6，所以要使用插件 babel loader 转化。npm i babel-loader @babel/core @babel/preset-env -D,在moudles中添加

{
  test:/\.js$/,
	exclude:/node_modules/,
	use: {
		loader:"babel-loader",
	},
	options{
		preset:["@babel/preset-env"]
	}
}

但是这样直接可能打包会失败 因为目前还解析不了我们的 async/await 语法，安装 regeneratorRuntime 插件，npm i @babel/runtime -D 和 npm i @babel/plugin-transform-runtime 在刚刚的 options 中再加入
plugins:[ // 设置编译的插件
[‘@babel/plugin-transform-runtime’] //设置编译的规则