电脑webpack-2、创建package.json文件- - -npm init。

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

请确认您的笔记本已经安装了node和npm。 如果您还没有安装，请先安装。 以下操作需要在这两种安装的基础上进行。

webpack配置 1.创建一个空文件夹 2.创建package.json文件 - - -npm init。

使用编辑器打开该文件夹。 我这里使用的编辑器是vscode。 然后在命令行中输入命令“npm init”。 会有一些选择。 您可以直接按 Enter 键。 默认设置，全部按回车后，会生成一个“package.json”文件。 如下：

如果要修改信息可以直接在文件中修改

如果你想让“package.json”文件全部为默认设置，跳过问题信息，可以直接执行命令“npm init -y”

例如：

3.安装webpack相关3个包：webpack、webpack-cli、webpack-dev-server

执行命令“npm i webpack webpack-cli webpack-dev-server --save-dev”（这是项目安装，不是全局安装）

webpack安装有两种类型：全局安装和项目安装。

建议安装项目，因为可能有几个项目使用不同的webpack包版本，

全局安装只有一个版本，开发不方便。 全局开发是“npm i webpack -g”和“-g”

项目安装是每个项目独立的webpack包，方便

使用npm安装webpack、webpack-cli、webpack-dev-server三个包

i 是 install 的缩写

–save-dev 表示将安装包记录到package.json文件中，需要安装在开发环境中（有开发环境和生产环境，开发环境是指本地开发时的环境，生产环境是指放置线上时的环境）

执行该命令后，

① 这些包的安装会记录在package.json文件中

② 并生成一个“package-lock.json”文件 - - - 记录安装包的具体版本号以及该包的一些依赖包信息

③ 会多出一个“node_modules”文件夹- - - 通过npm安装的依赖包都在这个文件夹下：

4.创建入口js文件

创建一个名为“src”的文件夹，并在该文件夹下创建一个新文件“index.js”，

5、根目录下创建“webpack.config.js”配置文件

创建文件“webpack.config.js”后（注意：文件名总是这样写，不要写错），在文件中添加配置：

module.exports = {
  mode: 'development', // 注明生产环境下
  entry: './src/index.js' // 指定入口文件
}

可以去webpack官网查看webpack的具体介绍和使用说明等。

webpack英文文档：

6.使用webpack进行打包

执行命令“npx webpack”

npx- - - 在当前项目下执行命令webpack，

如果直接写命令“webpack”会报错电脑webpack，因为不是全局安装的webpack，项目下安装的webpack需要添加“npx”

会生成一个新的文件夹“dist”，该文件夹下有一个文件“main.js”- - - src文件夹下打包“index.js”生成的文件

如果想改变生成的文件名，可以在“webpack.config.js”文件中添加配置---output：

如果不设置输出，则默认生成main.js

7.安装插件“html-webpack-plugin”来处理html文件

“npm 我 html-webpack-plugin -D”

前面的都是处理js文件的，不能处理其他格式的文件，但是项目中不仅有js文件，还有html文件。 “html-webpack-plugin”插件用于打包html文件

“-D”是“--save-dev”的缩写

插件的安装和使用可以详细查看npm官网：

安装完成后，在“webpack.config.js”中导入并使用：

配置完成后，重新打包——“npx webpack”，或者生成“index.html”文件，手动将js文件加载到html文件中：

8. 模板配置

如果你想根据你创建的html模板生成打包后的html文件，可以添加模板并配置如下：

template后配置的模板路径

添加完模板和配置后，重新执行“npx webpack”---进行打包，

根据模板生成的html文件会生成：

9. 如果有不想打包的文件，请安装插件“copy-webpack-plugin”

“npm 我复制 webpack-plugin -D”

创建一个不想打包的文件夹“static”，并在下面新建一个文件“s.js”

安装“copy-webpack-plugin”后，导入并添加配置：

配置完成后电脑webpack，重新执行“npx webpack”即可生成对应的解压文件夹和文件，如上图所示。 文件不会被打包吗？ 和源文件是一样的

webpack.config.js 示例

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: "static", to: "staticTest" },
      ],
    }),
  ]
}

Webpack配置优化 1.配置文件拆分

在根目录下创建文件夹“build”，添加：“webpack.base.config.js”、“webpack.dev.config.js”、“webpack.pro.config.js”、“webpack.config.js” 4 个文件

"webpack.base.config.js" ---基础配置，无论是开发环境还是生产环境，都需要配置

"webpack.dev.config.js" - - - 开发环境需要的配置

"webpack.pro.config.js" - - - 生产环境需要的配置

"webpack.config.js" - - - 总体来说，最终使用的配置文件

2、在配置文件①“webpack.base.config.js”配置中添加配置代码：

将原根目录下的“webpack.config.js”内容复制到“webpack.base.config.js”，删除其中的“mode:“development””，“webpack.config.js”也可以删除，或重命名。 如下：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: "static", to: "staticTest" },
      ],
    }),
  ]
}

②“webpack.dev.config.js”配置：

module.exports = {
  devtool: 'eval-cheap-module-source-map'
}

以廉价模式开发source-map，提高效率

③“webpack.pro.config.js”配置：

在生产环境打包时，必须先删除之前的打包文件，然后重新打包。 插件安装不需要每次都自动删除。

首先安装插件“clean-webpack-plugin”---执行命令“npm i clean-webpack-plugin -D”，然后添加配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
  ]
}

④“webpack.config.js”配置：

首先安装“webpack-merge”包---执行命令“npm i webpack-merge -D”

安装完成后，添加配置如下：

const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig =  require('./webpack.pro.config')
module.exports = (env, argv) => {
  const config = argv.mode === 'development' ? devConfig : proConfig  // 根据开发环境还是生产环境选择不同配置
  return merge(baseConfig, config)  // 合并配置
}

3.在package.json文件中添加启动命令

以前的“package.json”文件：

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^9.1.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.64.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0",
    "webpack-merge": "^5.8.0"
  }
}

在“脚本”下添加命令：

"scripts": {
    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js"
  },

现在：

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^9.1.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.64.1",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0",
    "webpack-merge": "^5.8.0"
  }
}

在“package.json”中添加启动命令后，

运行开发环境---执行命令“npm run start”，

启动服务，“run start”表示执行“scripts”里面定义的“start”之后的命令

webpack-dev-server 是启动开发环境的服务器

--mode=development 将参数mode的值设置为“development”，“webpack.config.js”文件中的argv.mode将接收mode的值

执行“npm run start”运行项目后，可以复制访问地址查看：

开发环境中打包编译的文件：

页：

终止服务 - - - “Ctrl + c”，然后“y”，然后按 Enter

执行命令“npm run build”---生产环境，打包并编译文件：

打包后的html文件中的代码会一行显示，减少文件大小

巴贝尔配置

ES5以上的浏览器无法识别句型，ES2015-2010（ES6-ES11）句型也无法识别

安装babel，将ES6-ES11句型转换成浏览器可以识别的es5语法

命令行输入“npm install -D babel-loader @babel/core @babel/preset-env”即可安装babel相关包

然后在“webpack.base.config.js”中添加babel相关配置：

module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { "useBuiltIns": "entry" }]
            ]
          }
        }
      }
    ]
  }

配置“webpack.base.config.js”文件后：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CopyPlugin({
      patterns: [
        { from: "static", to: "staticTest" },
      ],
    }),
  ],
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { "useBuiltIns": "entry" }]
            ]
          }
        }
      }
    ]
  }
}

在进行babel相关配置之前：

浏览器中的js文件：

babel配置完成后，浏览器中的js文件：