webpack

安装webpack

局部安装npm install webpack –save-dev
全局安装npm install–g  webpack 
全局安装webpack

Webpack –v查看webpack是否安装成功

报错如下：缺少webpack-cli

 

解决方案：需要安装一个webpack-cli

查看webpack 是否安装成功   webpack -v

 

 

Webpack的使用 

初始化webpack   语法：npm init

 

此时回到文件夹webpack中，新增文件package.json如下

在webpack下新建一个hello.js文件，写入以下js测试代码：

采用webpack进行打包

语法：webpack 打包文件路径  打包后的文件路径（旧版本，目前报错）

4.0打包方式：  webpack 打包文件路径 --mode development

Hash生成一段唯一的字符串

Version版本号

Asset打包后的文件名

Size打包后文件的大小

Chunks模块

ChunkNames模块名

打开webpack文件夹，发现webpack下自动生成了一个dist文件夹，里面包含一个main.js文件。Main.js文件则为打包后的文件

新建一个index.html文件，在html中引入打包后的main.js文件， 运行index.html，则script能被正常调用

在webpack下新建一个world.js,写入部分js的测试代码

并在hello.js中引入world.js文件（采用common.js的语法require进行引用）

采用webpack重新打包hello.js

在webpack中新建一个say.js文件,写入部分js测试代码

并在world.js中进行引入

重新打包hello.js

运行index.html,则显示如下

webpack打包的常用参数

--watch实时监听

--display-reasons查看打包的原因

--progress查看打包的进度

--display-modules查看打包的模块

新建style.css文件，写入测试代码

在hello.js中引入style.css文件

重新打包hello.js,报错

错误信息：You may need an appropriate loader to handle this file type.

原因：webpack默认状态下，不能识别.css 图片 es6文件

解决方案：通过npm安装loader       css-loader(识别css代码)       style-loader（引入css代码）

图片 File-loader

方法一：

通过--module-bind “”绑定所需要的loader

此时运行index.html,页面的css不能正确运行

重新打包hello.js

命令：D:\CQ1805\H5高级\webpack>webpack hello.js --mode development --module-bind "css=style-loader!css-loader"

方法二：

或者修改hello.js中style.css的引入

注意：style-loader和css-loader的顺序不能改变

则可以通过webpack hello.js --mode development进行打包，页面也能正常显示css样式