webpack4 安装配置及使用方法

webpack官网地址：https://webpack.github.io

 

1. 初探webpack

1.1 webpack的安装

创建文件夹 webpack-test

mkdir webpack-test

cd webpack-test

在 webpack-test文件夹下通过npm init构建环境

webpack4.x 后需要安装webpack-cli 

cnpm install webpack --save-dev //安装webpack
cnpm install -g webpack-cli //全局安装webpack-cli,(如果之前没有安装的话)
cnpm install --save-dev webpack-cli //同步到局部项目文件夹下

此时文件夹下包含一个node_modules文件夹和package.json文件

1.2 使用webpack打包文件

在根目录下创建一个文件main.js，并添加方法

开始打包，使用 webpack 打包文件名 -o 打包后的文件名

第一个打包文件就形成了，打开bundle文件，会发现是经过压缩处理后的。

1.3 在打包文件中引入另一个文件

• 将js与css文件同时引入并打包，通过 require方法 引入文件 require('文件路径')
• 打包前引入css文件，必须安装css处理器

cnpm install css-loader style-loader --save-dev

安装完成后，其中require引入css和js不同之处在于,require css文件的时候，必须在路径前加上 style-loader!css-loader!才能够被真正引入识别

!感叹号是分割符，表示两个工具都参与处理

style-loarder负责在html文件中插入style标签

此时再次打包会发现，打包内容就已经将对应的文件引入

1.4 在页面中展示打包后的效果

创建index.html文件，并引入打包后的 bundle.js 文件查看效果

• 其中vscode可以直接通过输入 ! + tab 快捷生成html模板

通过webpack再次打包main.js文件，然后打开index.html文件。

 

此时main.js的函数先被执行,执行完成后style.css的样式才生效

• 用命令行指定css-loader

webpack main.js -o bundle.js --module-bind 'css=style-loader!css-loader'

• 文件更新自动打包

webpack main.js -o bundle.js --module-bind 'css=style-loader!css-loader' --watch

• 查看打包进度，打包模块，打包原因

webpack main.js -o bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons

2. webpack基本配置

2.1 webpack.config.js配置信息

webpack命令直接使用，默认使用根目录下的webpack.config.js的配置信息。也可以通过 --config 命令制定其他配置文件

webapck4.x之后，配置文件path必须为绝对路径，否则会报异常错误。

//单入口文件
//webapck4.x之后，配置文件path必须为绝对路径
const path = require('path')
module.exports={
    //入口文件
    //entry可以有三种写法--字符串/数组/对象
    //字符串：entry:'路径'
    //数组：entry:['路径1'，'路径1']
    entry:{
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },
    //打包之后文件的位置
    output:{
        path:path.resolve(__dirname,'./dist/js'),
        //name代表文件名，hash代表打包时随机生成的hash值，可当作版本号,chunkhash随机版本号，修改过后的文件的hash值发生变化
        filename:'[name]-[chunkhash].js'
    }
}

• 指定配置文件

webpack --config webpack2.config.js //指定webpack2.config.js为配置文件

 

• 自定义npm命令脚本

每次打包都会提示 WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

原因是需要在package.json中配置对应的development 和 production 环境的默认值

  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
  }

配置完成之后，就可以直接使用 npm run dev 去打包（npm run dev 等价于package.json中配置的 webpack --mode development）

3. 自动化生成项目中的html页面

3.1 使用html-webpack-plugin插件

 cnpm install html-webpack-plugin --save-dev

安装完成后在webpack配置文件中建立对插件的引用

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

如果我们需要引入插件，就需要针对webpack配置文件增加plugins选项。

    plugins:[
        new htmlWebpckPlugin({
            template:'index.html' //根目录
        }), //初始化
    ]

npm run dev 运行打包后，会发现dist文件夹下自动生成了一个index.html文件，其中js文件已经自动关联