webpack学习笔记
来源:互联网 发布:java api手机安卓版 编辑:程序博客网 时间:2024/06/09 20:14
一般网上找到的教程总是不够详细,或者是步骤杂乱,可能主要都是针对已经学习过又忘记了的人群。
所以我整理了一下,然后作为一个学习笔记,与大家共勉。
一、安装webpack
我们通过 npm 全局安装 webpack:
npm install webpack -g
webpack --help
能够查看 webpack 提供的所有命令:这样就表示你已经安装成功了。
二、初始化项目#
安装好 webpack 后,我们要怎么开始一个项目?
如果你用过 grunt.js、gulpjs 一类工具,它们可以借助 yeoman 来初始化项目。webpack 的情况不太一样,我们可以把它当作 node.js 项目来初始化。当然,借用一些模板会更省事,比如 react transform boilerplate。
但这里还是聊聊如何手动初始化一个 webpack 项目。
第一步:
创建一个 package.json 文件,用于保存项目版本、依赖关系等
第二步:
npm init -y
在当前目录下安装 webpack
第三步:
npm install webpack --save-dev之后,我们的项目下有两个内容:
我们还需要一个 index.html 文件,示例如下:
<span style="font-size:18px;"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webpack 教程</title></head><body> hello wushaoxion</body></html></span>
三、安装 webpack-dev-server
安装webpack-dev-server的目的是为了创建服务器,让我们能浏览我们的项目。
第一步:
在全局环境中安装 webpack-dev-server:
npm install webpack-dev-server -g
第二步:
在项目根目录下执行命令:webpack-dev-server
四、webpack 配置#
在单页面应用里,项目通常会有一个入口(entry)文件,假设是 main.js,我们通过配置 webpack 来指明它的位置。
首先,在项目根目录新建一个 webpack.config.js,这是 webpack 默认的配置文件名称,添加以下内容:
<span style="font-size:18px;">module.exports = { entry: './main.js'};</span>
这时在项目根目录执行 webpack,会提示我们,
Output filename not configured.
因为我们只是设定了入口(entry),还没有设定一个输出文件的路径与名称。
在 webpack.config.js 中添加一个 output:
<span style="font-size:18px;"><pre name="code" class="javascript">module.exports = { entry: './main.js', output: { path: __dirname, // 输出文件的保存路径 filename: 'bundle.js' // 输出文件的名称 }}</span>
现在在项目里执行 webpack 命令,我们的根目录下会多出一个 bundle.js 文件:接下来,在 index.html 中引用 bundle.js 文件:
<span style="font-size:18px;"><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>webpack 教程</title></head><body> <script src="./bundle.js"></script> <!-- 在 index.html 文件中添加这一行代码 --></body></html></span>
大功告成。
五、刷新页面
iframe 模式
我们不访问 http://localhost:8080,而是访问 http://localhost:8080/webpack-dev-server/index.html
inline 模式
在命令行中指定该模式,webpack-dev-server --inline。这样 http://localhost:8080/index.html 页面就会在 js 文件变化后自动刷新了。
以上说的两个页面自动刷新的模式都是指刷新整个页面,相当于点击了浏览器的刷新按钮。
六、第三方库#
webpack 并不是包管理器,所以如果我们要使用第三方库,需要借助 npm。比如,在项目里安装 jQuery:
npm install jquery --save
七、模块化 JavaScript
如果我想用 ES6 的方式引入某个 es6 模块,比如:
import $ from 'whatever';
安装 babel-loader
npm install babel-loader babel-core babel-preset-es2015 --save-dev
在 module.exports 值中添加 module:
<span style="font-size:18px;">module.exports = {entry: { app: ['./main.js']},output: { filename: 'bundle.js'},module: { loaders: [{ test: /\.js$/, loaders: ['babel?presets[]=es2015'], exclude: /node_modules/ }]}}</span>
这样我们就可以在我们的 js 文件中使用 ES6 语法,babel-loader 负责翻译。
我们可以按传统方法使用 CSS,即在 HTML 文件中添加:
<link rel="stylesheet" href="style/app.css">
但 webpack 里,CSS 同样可以模块化,使用 import 导入。
因此我们不再使用 link 标签来引用 CSS,而是通过 webpack 的 style-loader 及 css-loader。前者将 css 文件以 <style></style> 标签插入 <head> 头部,后者负责解读、加载 CSS 文件。
安装 CSS 相关的加载器
npm install style-loader css-loader --save-dev
<span style="font-size:18px;">{module: { loaders: [ { test: /\.css$/, loaders: ['style', 'css'] } ]}}</span>
在 main.js 文件中引入 css
import'./style/app.css';
上一步里,我们 import 到 JavaScript 文件中的 CSS 文件中的 CSS 在打包后是仍然是全局的,也就是说,我们只是换了种加载 CSS 的方式,在书写 CSS 的时候,还是需要注意使用命名规范,比如使用 BEM,否则全局环境 CSS 类的冲突等问题不会消失。
这里,webpack 做了一个模块化 CSS 的尝试,真正意思上的「模块化」,即 CSS 类不会泄露到全局环境中,而只会定义在 UI 模块内 – 类似 react.js 这类模块,或者 web components。
autoprefixer
我们在写 CSS 时,按 CSS 规范写,构建时利用 autoprefixer 可以输出 -webkit、-moz 这样的浏览器前缀,webpack 同样是通过 loader 提供该功能。
安装 autoprefixer-loader
npm install autoprefixer-loader --save-dev
<span style="font-size:18px;">loaders: [{test: /\.css$/,loader: 'style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}',//...}]</span>
重启 webpack-dev-server
假如我们在 CSS 中写了 body { display: flex; } 规则,再查看 bundle.js 文件的话,我们能看到类似如下的代码:
<span style="font-size:18px;">body {\n\tdisplay: -webkit-box;\n\tdisplay: -webkit-flex;\n\tdisplay: -ms-flexbox</span>
以上关于webpack的常用功能配置已经介绍完毕,如果想了解更多,请访问:http://www.easyike.com
- webpack学习笔记
- webpack学习笔记
- webpack学习笔记<使用>
- Webpack 学习笔记
- webpack学习笔记
- webpack 学习笔记
- webpack入门学习笔记
- webpack学习笔记
- webpack学习笔记一
- 【转】webpack学习笔记
- webpack 学习笔记
- Webpack学习笔记
- webpack学习笔记
- webpack学习笔记(一)
- Webpack学习笔记(二)
- webpack学习笔记1
- webpack学习笔记
- webpack学习笔记
- 前端面试的思路
- 【SSM 5】Mybatis分页插件的使用
- react开发思维方式入门
- hash
- C++智能指针简单剖析
- webpack学习笔记
- 前端面试基础题
- springMVC框架下如何实现移动端接口调用——代码实例
- callee、caller、call、apply、bind这些方法的含义和使用
- 个人总结
- CentOS 7中Nginx1.9.5编译安装教程systemctl启动
- Struts 2.5 和Struts 2.3 中的web.xml
- 21-物理页属性-P-RW
- redis主从复制