webpack基础使用-01

想要了解更全面可以去官网https://www.webpackjs.com/concepts/对应api来了解

1. 初始化项目

首先新建项目目录，在终端中打开输入：

npm init -y

初始化项目，这时项目中会出现package.json文件，这时项目的基本文件格式

main.js->为项目的入口文件，dist->项目打包后输出的文件夹。

2. 打包

在建好文件夹后将main.js（写点测试代码）打包输出到dist文件夹中的bundle.js 中，使用命令：

webpack src/main.js -o dist/bundle.js --model development

此命令会去寻找项目中是否有 dist/bundle.js 如果没有就会自动创建，由于该命令比较繁琐不利于开发，所以可以使用 webpack-dev-server 工具进行配置

npm  i webpack-dev-server -D

此时在项目的根目录新建一个 webpack.config.js 文件来配置打包的一些设置。建好文件后在文件中编写：

var path = require('path')

module.exports = {

  mode: 'development',
  entry: path.join(__dirname, './src/main.js'), //入口，表示要使用 webpack 打包哪个文件

  output: {
    path: path.join(__dirname, './dist'),//指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' //这是指定 输出的文件的名称
  }
}

此时在终端中输入

webpack

效果就和之前的那一长串命令一样了（此时不能进行实时打包）

在package.json配置相关命令实施热更新打包

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },

webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中，必须安装webpack和 webpack-cli
运行命令

npm i webpack -D
npm i webpack-cli -D

此时在运行就可以打开你在package.json 中 --contentBase 所编写的初始文件入口 这里我写的是src那么会打开 index.html 文件

npm run dev  

此时在你正确在index.html中引入 bundle.js 脚本时，会报错

这是因为webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘中；而是直接托管到了 电脑的内存中，所以，我们在项目根目录中找不到 这个打包好的 bundle.js;
我们可以认为， webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不到它，但是我们可以认为，和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js。

解决方法有两种1.直接将index.html引入bundle.js的路径改为 …/bundle.js. 2.可以将整个html都放到内存中，这时需要在本地安装一个工具 html-webpack-plugin(装插件前先停掉webpack-dev-server --Ctrl+c

npm i html-webpack-plugin -D

装好后在 webpack.config.js 里进行相应的配置

var path = require('path');

var htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

  mode: 'development',
  entry: path.join(__dirname, './src/main.js'), //入口，表示要使用 webpack 打包哪个文件

  output: {
    path: path.join(__dirname, './dist'),//指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' //这是指定 输出的文件的名称
  },

  plugins: [
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    })
  ]
}