webpack打包配置流程记录

1.首先进入项目文件中运行下面的命令

npm init -y

2.运行下面命令进行全局安装

 npm i webpack webpack-cli -D

• 这里有个注意点

1.  当带上 webpack-cli的时候可能会报错,可直接运行npm i webpack -D命令

3.新建webpack.config.js配置文件(根目录下) ,加上下面的配置

module.exports = {

   mode:“development”   //这是定义打包格式

}

4.在package.json文件中script项中添加如下代码

“dev”:"webpack"

5.这样在终端调试窗口运行npm run dev 就可以打包了,这时候会创建一个dist文件,里面放的就是打包之后的文件,再将打包之后的文件引入相应的html文件中即可引用

值得注意的是,在这种配置下使用webpack ./src/main.js -o ./dist/bundle.js -d命令进行打包会报错,本人目前是通过先设置package.json文件中script项的“dev”:"webpack",然后再通过npm run dev命令进行打包才成功,还没找到问题所在

这样我们就实现了webpack的基本配置了,但是这样有个缺陷就是我们修改代码之后直接去刷新页面是看不到效果的,需要每次都去重新打包才行,对于这种情况,自动打包就诞生了,它就是webpack-dev-resver

1.webpack-dev-resver的配置首先就是安装这个依赖,如下命令,和webpack安装一样

npm install webpack-dev-server webpack webpack-cli -D

2. 配置webpack.config.js如下(配置内容都接着之前的配置选项)

module.exports = {
  mode:'development',  //mode用于指定构建模式
  entry: path.join(__dirname, './src/main.js'),  //入口文件
  output: {
    path: path.join(__dirname, './dist'), //指定打包之后输出到哪个文件
    filename: "index.js" //指定输出文件的文件名
  }
}

3.配置package.json 如下(配置内容都接着之前的配置选项)

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

4.修改html文件中的js资源引入目录为"/index.js" 

5.配置自动打包需要注意的问题

1. 开启自动打包之后会启动一个实时打包的http服务器
2. webpack-dev-resver自动打包的文件(上述的index.js)默认是放在了项目文件的根目录下,并且是虚拟的,看不见的

未完待续........