淘先锋技术网

首页 1 2 3 4 5 6 7

webpack相关

安装webpack

  • 一种分为全局安装，另一种则在项目的根目录下安装，其中需要安装webpack主包以及webpack-cli（尽量在根目录下安装，若在全局安装可能会使项目的webpack锁定在某个版本里）

  • 安装webpack之前需要先安装一个npm的包管理的配置文件

npm init -y

安装完成之后会在根目录下生成package.json文件

  • 在根目录下继续安装webpack主包和webpack-cli

npm install webpack webpack-cli --save-dev

安装完成后根目录下会在新增一个文件夹为node_modules依赖包和一个package-lock.json文件

webpack安装完成

运行webpack

示例如下图：

步骤：

  • 新建setup文件夹，在文件夹下新建src文件夹，在src下新建helloWorld.js文件，写一个方法在控制台输出hello world，并用export导出

  • 再在src下新建index.js文件，作为主入口，import引入helloWorld.js文件下的printStr方法

  • 进入setup文件夹，使用webpack命令打包（或者右键setup文件夹，选择在集成终端打开）

npx webpack //npx依托于npm，它的作用就是观察在当前目录下有没有你想运行的命令，没有就会去上一级目录寻找。

打包完成，并且在setup文件夹下生成了dist文件夹，里边包含main.js文件

  • 此时在setup文件夹下新建index.html文件，将main.js文件引入，打开浏览器查看控制台输出

通过配置文件来配置参数-设置入口文件

  1. 输入指令

npx webpack --entry './src/index.js' --mode production

其中-entry表示后面路径文件表示入口文件，-mode指定环境，production表示生产环境

运行后setup下仍然会生成dist文件夹包含main.js

  1. 通过配置文件来配置参数

  • 在setup目录下新建webpack.config.js文件

  • 由于文件是在nodejs下运行，所以需要使用Node.js的CommonJs模块，使用module.exports来定义

const path = require('path');
module.exports = {
    entry: './src/index.js',  //以这个文件为入口文件
    output: {
        filename: 'bundle.js', //输出的文件名
        path: path.resolve(__dirname, './dist') //输出文件所在路径，__dirname意为当前webpack.config.js文件所在的物理路径，第二个参数表示基于第一个参数解析到这个路径下，以此来指定一个绝对路径
    },
    mode: 'none' //先给none，避免报错
}

  • 执行webpack命令

npx webpack

执行完成后会在setup文件夹下生成dist文件夹，其中包含名为bundle的js文件

在浏览器打开index.html文件效果与目录二控制台效果一致

使用HtmlWebpackPlugin插件

安装HtmlWebpackPlugin插件

npm install html-webpack-plugin -D

当前插件作用为之前是需要手动在html中引入js文件，使用该插件后会自动将js文件引入

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname, './dist')
    },
    mode:'none',
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'app.html',
            inject:'body'
        })
    ]
}

  • template：指定当前目录下的index.html为模板

  • filename：指定输出文件的文件名

  • inject：用来定义自动生成的script标签在什么位置

使用webpack命令打包

生成的app.html如下：

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script defer src="bundle.js"></script></body>
</html>

使用watch mode(观察模式)

watch模式意味着只要改动了文件webpack就会重新编译，不需要再手动构建

只需在根目录下输入以下命令

npx webpack --watch

此时只要修改了以上的helloworld.js文件，刷新html文件控制台输出就会变化

使用webpack-dev-server

watch观察模式只是省略了不用手动打包的过程，但仍然需要手动刷新浏览器，webpack-dev-server可以使浏览器进行热加载，从而达到修改后不需手动刷新浏览器会自动更新

在根目录下安装webpack-dev-server

npm install --save-dev webpack-dev-server

在webpack.config.js中重新配置devServer

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname, './dist')
    },
    mode:'development',
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'app.html',
            inject:'body'
        })
    ],
    devServer:{
        static:'./dist'  //表示devServer指向的物理路径
    }
}

在根目录下执行

npx webpack-dev-server

启动后会有一个localhost:8080启动了

打开网址后可以看到有dist文件夹下的两个文件

其他

在package.json中修改script配置

"scripts": {
    "bundle": "webpack"   //bundle为打包后所在文件夹名称，使用webpack打包
  },

注：

mode: 'production',//默认打包模式（代码会被压缩）

mode: 'development',//代码不会被压缩