前面介绍了使用 webpack 做最基础的打包, 接下来讲讲 webpack 的进阶.
1, 使用 webpack 构建本地服务器:
想不想让你的浏览器监听你的代码的修改, 并自动刷新显示修改后的结果, 其实 Webpack 提供一个可选的本地开发服务器, 这个本地服务器基于 node.js 构建, 可以实现你想要的这些功能, 不过它是一个单独的组件, 在 webpack 中进行配置之前需要单独安装它作为项目依赖
npm install --save-dev webpack-dev-server -g
devServer 作为 webpack 配置选项中的一项, 以下是它的一些配置选项, 更多配置可以参考这里 https://webpack.js.org/configuration/dev-server/
devserver 的配置选项 & nbsp;
| 功能描述 |
contentBase | 默认 webpack-dev-server 会为根文件夹提供本地服务器, 如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到 “public" 目录) |
port | 设置默认监听端口,如果省略,默认为”8080“ |
inline | 设置为 true,当源文件改变时会自动刷新页面 |
historyApiFallback | 在开发单页应用时非常有用,它依赖于 html5 history API,如果设置为 true,所有的跳转将指向 index.html |
把这些命令加到 webpack 的配置文件中, 现在的配置文件 webpack.config.js 如下所示:
- module.exports = {
- entry: __dirname + "/app/main.js", // 已多次提及的唯一入口文件
- output: {
- path: __dirname + "/public", // 打包后的文件存放的地方
- filename: "bundle.js" // 打包后输出文件的文件名
- },
- devServer: {
- contentBase: "./public", // 本地服务器所加载的页面所在的目录
- historyApiFallback: true, // 不跳转
- inline: true // 实时刷新
- }
- }
在 package.json 中的 scripts 对象中添加如下命令, 用以开启本地服务器:
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "start": "webpack"
- }
在终端中输入 npm run server 即可在本地的
8080
端口查看结果
2,Loaders
接着就是大名鼎鼎的 Loaders 了!
Loaders 是 webpack 提供的最激动人心的功能之一了. 通过使用不同的 loader,webpack 有能力调用外部的脚本或工具, 实现对不同格式的文件的处理, 比如说分析转换 sass 为 CSS, 或者把下一代的 JS 文件 (ES6,ES7) 转换为现代浏览器兼容的 JS 文件, 对 React 的开发而言, 合适的 Loaders 可以把 React 的中用到的 JSX 文件转换为 JS 文件. 所以如果我们需要在应用中添加 css 文件, 就需要使用到 css-loader 和 style-loader, 他们做两件不同的事情, css-loader 会遍历 CSS 文件, 然后找到 url() 表达式然后处理他们, style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中.
接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g).
cnpm install css-loader style-loader
执行以上命令后, 会在 node_modules 目录安装
css-loader 和 style-loader .
接下来在 app 目录下新建一个 css 文件, 代码如下:
- body{
- background-color: green;
- }
修改 main.js 文件, 代码如下:
- //main.js
- require("!style-loader!css-loader!./style.css");
- const greeter = require('./Greeter.js');
- document.querySelector("#root").appendChild(greeter());
接下来我们使用 webpack 命令来打包:
- webpack app/main.js -o public/bundle.js
- 或者之前配置 start 可以使用:
- npm start
注: 之前 css-loader 和 style-loader 若是全局安转, 在打包时可能会报错, 这俩个依赖无法找到. 这时可以使用以下代码解决:
- npm link css-loader
- npm link style-loader
在浏览器访问, 输出结果如下所示:
require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!, 当然我们可以根据模块类型 (扩展名) 来自动绑定需要的 loader. 将 main.js 中的 require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") :
- //main.js
- require("./style.css");
- const greeter = require('./Greeter.js');
- document.querySelector("#root").appendChild(greeter());
然后执行:
webpack app/main.js -o public/bundle.js --module-bind "css=style-loader!css-loader"
在浏览器中访问, 效果同上种.
3, 配置文件
我们可以将一些编译选项放在配置文件中(webpack.config.js), 以便于统一管理:
- module.exports = {
- entry: "./runoob1.js",
- output: {
- path: __dirname,
- filename: "bundle.js"
- },
- module: { // 新增配置文件
- rules: [
- { test: /\.css$/, loader: "style-loader!css-loader" }
- ]
- },
- devServer: {
- contentBase: "./public",
- historyApiFallback: true,
- inline: true
- }
- };
4, 插件
插件在 webpack 的配置信息 plugins 选项中指定, 用于完成一些 loader 不能完成的工.
webpack 自带一些插件, 你可以通过 cnpm 安装一些插件.
使用内置插件需要通过以下命令来安装:
cnpm install webpack --save-dev
比如我们可以安装内置的 BannerPlugin 插件, 用于在文件头部输出一些注释信息. 修改 webpack.config.js, 代码如下:
- var webpack = require('webpack');
- module.exports = {
- entry: __dirname + "/app/main.js", // 已多次提及的唯一入口文件
- output: {
- path: __dirname + "/public", // 打包后的文件存放的地方
- filename: "bundle.js" // 打包后输出文件的文件名
- },
- devServer: {
- contentBase: "./public", // 本地服务器所加载的页面所在的目录
- historyApiFallback: true, // 不跳转
- inline: true // 实时刷新
- },
- module: { // 新增配置文件
- rules: [
- { test: /\.css$/, loader: "style-loader!css-loader" }
- ]
- },
- plugins: [ // 用于输出注释信息
- new webpack.BannerPlugin('注释: 编译后文件!')
- ]
- }
然后运行吗, 打开 bundle.js, 可以看到文件头部出现了我们指定的注释信息.
来源: http://www.bubuko.com/infodetail-2658403.html