接上一篇的内容继续来说,背景篇的内容主要是介绍 web 前端工具的出现的原因和当前主要 JavaScript 模块化编程的几种规范!这篇内容主要介绍 webpack 的初级使用!
注意:目前 webpack 分为两个版本:1.x 和 2.x 这两个版的对应配置方式也是不一样的,我目前只使用过 1.X 的版本。下面例子中所有配置的都是 1.x 的
这里先上一张 webpack 官方的图
webpack 是依赖于的,这就是说,再安装 webpack 之前,你的电脑上要先安装 Node.js(且版本不能低于 0.6 以上),我们去上下载一个, 一路 next 即可!
安装好之后我们在 CMD 中输入
, 来检查一下当前的版本以及是否安装成功:
- node -v
- C: \Users\zhang > node - v v7.2.0
接下来,还要说一个东西就是 npm(Node package manager) 即 Node 的包管理工具。相当于 VS 中的 Nuget(java 中的 maven), 就是个管理当前项目依赖的东西。在很久以前 node 和 npm 是分开,要单独安装。现在的 node.js 已经把 npm 内置在程序里了!另外,如果完全没有使用过 npm 的同学建议去看下这个(也就 5 分钟的事),了解下常用命令,因为下面会用到。
在 CMD 中输入
:
- npm -v
- C: \Users\zhang > npm - v 3.10.9
做了这么多的准备工作,终于能安心的安装 webpack 了。有以下的两种方式:
- #全局安装npm install - g webpack#安装webpack到你当前的项目(仅当前项目能使用)npm install--save - dev webpack
我这里直接使用了全局安装
构建一个项目
- npm init
- npm init
我这里的显示如下:
- D: \webpack\webpack - demo > npm init.....name: (webpack - demo) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to D: \webpack\webpack - demo\package.json: {
- "name": "webpack-demo",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "author": "",
- "license": "ISC"
- }
- Is this ok ? (yes) D: \webpack\webpack - demo >
执行完上面的命令之后进行我们的项目目录,会发现多了一个
文件。里面显示的内容就是上面询问我们的那此问题,是一个 javascript 对象的方式存储。
- package.json
我们在当前的目录新建一个 src 文件夹,之后在 src 里面新建 entry.js 和 str.js 两个文件,在与 package.json 同级目录下新建一个 index.html 文件。项目结构如下图:
index.html 文件只包含最基础的 html 代码,它的作用就是加载
打包之后的 js 文件。
- webpack
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>
- webpack
- </title>
- </head>
- <body>
- <div id="app">
- </div>
- <script src="bundle.js">
- </script>
- </body>
- </html>
str.js 包含一个字符串变量。
- var words = '你好,webpack';
- module.exports = words;
entry.js 引用了 str.js 中的变量,并把值插入到页面中。
- words = require('./str.js');
- document.getElementById("app").textContent = words;
命令进行打包
- webpack
命令格式如下 (注:全局安装下):
- webpack {目录 / 要打包入口文件
- } {目录 / 存放打包后文件命
- }
我执行的结果如下:
然后用浏览器打开 index.html, 结果如下:
至此,我们用 webpack 成功的打包了一个文件,完成了一个 hellword 的程序。但是,我们思考下,如果每次运行程序都在 CMD 输入这么多的命令,非常的繁琐,有没有什么比较简单的办法呢?答案是肯定有的,使用配置文件的方式。
在项目的根目录下创建一个
文件,内容如下:
- webpack.config.js
- module.exports = {
- entry: './src/entry.js',
- output: {
- path: __dirname,
- filename: 'bundle.js'
- }
- }
现在我们只需要在 CMD 中输入
就可以达到和上面一行命令一样的效果了!
- webpack
webpack 本身仅仅支持 JavaScript 模块,如果要使用其它的语言,比如:es2016、TypeScript、CoffeeScript 等等,那么就需要使用
。
- loaders
接着上面的例子继续。在前端开发中 CSS 必定是不可缺少的,为我们的页面穿上美丽的外衣。那么使用 webpack 进行开发该怎么使用呢?
先介绍一下关于 Loaders 的配置和安装方式
在 webpack 中绝大多数的 loaders 都是以
的方式命名,使用 npm 来安装它们:
- xxx-loader
- #这种安装方式是指在生产环境中也使用此Loader npm install xxx - loader--save#这种方式仅仅在开发时,使用的loader npm install xxx - loader--save - dev
安装完成之后还要在
中进行配置才能使用,直接上代码:
- webpack.config.js
- js module.exports = { entry : './src/entry.js', output : { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' } ] } }
: 是一个正则表达式用来匹配要处理的文件类型(必要)
- test
: loader 对应的名称(必要)
- loader
: 手动添加必须处理文件(文件夹)或者屏蔽一些文件(文件夹)(可选)
- include/exclude
: 为 loader 提供额外的设置选项(可选,查看对应 loader 对应的 loader 说明文档就好)
- query
这里我使用两个开发中常用的
。
- loaders
和
- css-loader
,他们的作用分别是:
- style-loader
可以让你使用
- css-loader
和
- @import
的方法实现
- url(..)
的功能。而
- require()
可以所有打包后的样式添加到页面中二者组合在一起正好能实现把 CSS 打包到 js 脚本中的功能。
- style-loader
安装
- npm install css - loader style - loader--save - dev
配置
- js module.exports = { entry : './src/entry.js', output : { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' } ] } }
在 src 文件夹下新建一个 base.css 文件,输入以下内容。
- * {
- margin: 0;
- padding: 0;
- }
- body {
- font - family: "Microsoft YaHei",
- "WenQuanYi Micro Hei";
- font - size: 14px;
- line - height: 20px;
- }#app {
- margin: 30px auto;
- width: 150px;
- height: 50px;
- line - height: 50px;
- text - align: center;
- color: white;
- text - shadow: 0 1px 0#de533a;
- background: #F49484;
- }
在 entry.js 文件中进行修改,引入 base.css
- js words = require('./str.js'); require('./base.css') document.getElementById("app").textContent = words;
在 CMD 中执行 webpack 命令重新打包,之后再打开 index.html 结果如下:
在 webpack 还有很多的其它 loaders,作用也各不相同,比如:
(一个把 es2015 转换为现代浏览器能理解的对应 js 版本的 loader)、还有 css 预处理 loader
- Babel
、
- Scss Loader
、
- Less Loader
等,这里送官方的,供大家找到适合自己项目的 Loader。
- Stylus Loader
插件可以完成更多 Loader 不能完成的功能。主要是用来拓展 WebPack 的功能,主要在整个项目的构建过程中生效,执行相关的任务。
同样 webpack 的插件也非常的多,送上目前 webpack 内置的插件。
对于一个正式的项目开发完成之后,有以下的需求很正常:把打包后的 Js 文件进行压缩减少服务器的压力,还有在 js 文件中加上自己公司的版权声明。
要使用其一个插件首页要使用
进行安装,然后在 webpack.config.js 中进行配置。使用关键字
- npm
添加一个该插件的实例。
- plugins
上面两个插件都是 webpack 内置的,所以我们直接配置即可
- var webpack = require('webpack') module.exports = {
- entry: './src/entry.js',
- output: {
- path: __dirname,
- filename: 'bundle.js'
- },
- module: {
- loaders: [{
- test: /\.css$/,
- loader: 'style-loader!css-loader'
- }]
- },
- plugins: [new webpack.BannerPlugin('This file is created by javaSwing'), new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false
- }
- })]
- }
在 CMD 中运行 webpack,结果如下:
到此,webpack 的初级使用已经结束了,如果您能耐心看到这里,我想您应该明白了 webpack 的一些基本的使用。我也是半个多月前接触到这个东西,写下来一些自己对这个东西的理解,能帮助大家入门最好,更为细致的使用,仍需要大家的探索!
欢迎交流,共同进步!
参考资料:
来源: http://www.cnblogs.com/zxdBlog/p/6120105.html