淘先锋技术网

首页 1 2 3 4 5 6 7

安装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',//代码不会被压缩