什么是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文件,定义入口和输出
四、在package.json文件中添加一个npm脚本,这样运行本地的webpack比较方便
五、在终端中运行 npm run build 就可以在dist文件夹下生成打包后的bundle.js文件
如何使用Webpack处理除javascript以外的文件
安装loader允许webpack处理那些非javascript文件(webpack自身只能处理javascript),将对应类型的文件转换为webpack能够处理的模块。
处理样式文件
一、安装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文件夹生成出来后的文件列表:
还有很多关于webpack调试、devServer、热加载等功能请参考webpack官网,第一次发表文章,有不正确的地方欢迎大家指正,谢谢~~