webpack的使用方法,超详细的学习笔记

什么是webpack

Webpack是一个现代JavaScript应用程序的静态模块打包器。它把你的项目当做一个整体，通过给定的入口文件开始找到你的项目所有依赖模块，使用loaders处理它们，最后打包为一个或多个浏览器可识别的JavaScript文件，可以减少页面请求，优化网页性能。

如何使用Webpack

一、安装node JS (webpack在执行打包压缩的时候是依赖nodejs的)，请参考node JS官网进行下载安装

二、初始化一个node js模块

1、创建一个目录并在终端中进入当前目录执行npm init -y

2、安装webpack和webpack-cli(命令行工具)：

npm install webpack webpack-cli --save-dev

或者使用淘宝镜像安装,请直接百度“npm 淘宝镜像”，安装过淘宝镜像后再安装其他安装包时可直接把上面命令行的npm替换成cnpm

下面是我的目录结构（除了node_modules和package.json是自动生成的，其他文件都要手动添加）

 三、打开webpack.config.js文件，定义入口和输出

• entry：是 页面入口文件配置 （html文件引入唯一的js 文件）

• output：对应输出项配置

• path ：入口文件最终要输出到哪里，

• filename：输出文件的名称

• publicPath：公共资源路径

四、在package.json文件中添加一个npm脚本，这样运行本地的webpack比较方便

五、在终端中运行 npm run build 就可以在dist文件夹下生成打包后的bundle.js文件

如何使用Webpack处理除javascript以外的文件

安装loader允许webpack处理那些非javascript文件（webpack自身只能处理javascript）,将对应类型的文件转换为webpack能够处理的模块。

接下来我们继续配置loader, 通过加载器处理文件：比如 sass less 等, 告知 webpack 每一种文件都需要使用什么加载器来处理。

为了方便我们先统一把所有的包都先下载下来

npm install babel-loader babel babel-core css-loader style-loader url-loader file-loader less-loader less --save-dev

处理样式文件

一、安装css-loader、style-loader ：

npm install css-loader style-loader --save-dev　　

css-loader:允许webpack打包依赖的css文件     　　

style-loader:将css-loader处理后的样式注入到html的head内

二、在webpack.config.js配置文件中配置loader,如下：

 

处理es6/7语法

一、安装babel-loader：

npm install babel-loader babel-core babel-preset-latest --save-dev

babel-loader:babel 是一个编译js的平台，他可以帮你达到以下目的：

1、让你能使用最新的javascript代码（es6、es7...）,而不用管新标准是否被当前使用的浏览器完全支持

2、让你能使用基于javascript进行了扩展的语言

二、在webpack.config.js配置文件中配置loader,如下：

处理vue组件语法

一、安装vue-loader和vue：

npm install vue-loader vue-template-compiler --save-dev

npm install vue --save

vue-loader:是一个vue加载器，能够将独立的vue组件编译成javascript模块

二、在webpack.config.js配置文件中配置loader,如下：

 

要处理vue组件还需要在webpack.config.js配置文件中引入插件，以下标出来的是要新增的：

 

自动生成html文件

一、安装HtmlWebpackPlugin：

npm install html-webpack-plugin --save-dev

HtmlWebpackPlugin:自动生成html文件（index.html），也可以根据给定的模板文件在他的基础上来生成新的html文件，而且会在文件中自动引用webpack生成的bundle.js文件。

new多个实例可以生成多个html文件

二、在webpack.config.js配置文件中配置如下,还有很多选项可以参考htmlwebpackplugin官网配置

dist文件夹生成出来后的文件列表：

小工具: webpace-dev-server --devtool eval-source-map --progess --colors --open --port 8080 --hot

打包时输入这一行可以直接找到文件如果出错时的位置

小知识点: 上面这一句话如果觉得太长可以将

'scripts': {    'test': 'echo \'Error: no test specified\' && exit 1',    'dev': 'webpack-dev-server --devtool eval-source-map --progress --colors --open --port 8080 --hot'  },

这一段代码放到项目目录下的package.json里,

这样调试时如果输入npm run dev就等于输入那一长串代码

扫描二维码