第1步目的:初步使用webpack打包一个简单的js文件
1.全局安装webpack与webpack-cli
npm i webpack webpack-cli -g
2.新建一个目录,目录名自己定义
3.新建目录调起cmd
npm init
之后一直回车
4.当前目录安装webpack
npm i webpack webpack-cli
5.根目录下新建src目录,在内新增文件 index.js
文件内容随便写点什么,js就行。
6.根目录调起cmd
npx webpack
会在根目录打包出一个dist文件,内有一个main.js,内容就是上面js的内容,好,我们继续。
7.根目录下新建 webpack.config.js
内部内容主要需求为3点,即入口文件,出口文件,开发模式,具体可看webpack官方文档。
const path = require('path'); // node原生方法,获取绝对路径
function resolve(dir) {
return path.resolve(__dirname, dir) // https://blog.csdn.net/kikyou_csdn/article/details/83150538
}
module.exports = {
entry: resolve('src/index.js'), // 入口文件
output: {
path: resolve(__dirname, 'dist'), // 获得一个绝对路径
filename: 'dist/[name].[contenthash:8].js', // 出口文件
},
mode: 'development' // 开发模式
}
其中,output.filename 里面的 【name】与【contenthash:8】没想到怎么解释,先按自己想法描述一下:
name:自定义出口名称,但现在我写这篇文章的时候还未实现自定义,只能生成一个默认的main
contenthash8:生成8位的hash值,应该是方便在文件未改动时直接打包,减少打包时间