webpack的入门教程

蚊子前端博客
发布于 2017-09-24 22:45
在webpack中,一切皆资源,CSS,JS,图片等都可以作为资源处理。webpack在配置大型项目时,可能会很大很复杂的配置,这里我们就从简单的2-3个页面的配置开始说起

webpack 在官方网站中是这么定义的。webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。

在 webpack 中,一切皆资源,CSS、JS、图片等都可以作为资源处理。webpack 在配置大型项目时,可能会很大很复杂的配置,这里我们就从简单的 2-3 个页面的配置开始说起。

1. 简单的配置

如果之前用过 gulp 处理过前端资源,那么使用 webpack 就相对来说比较简单一些。要使用 webpack 的话,首先要在项目目录中安装 webpack,其他的我们稍后再安装:

COPYBASH

npm install webpack --save-dev

webpack 的配置要在根目录的 webpack.config.js 里,我们先来看下简单基本的配置:

COPYJAVASCRIPT

var webpack = require("webpack"); module.exports = { // 入口文件,可写多个 entry: { entry: "./src/entry.js", }, // 输出出口 output: { path: __dirname + "/out/", // 输出目录 filename: "[name].js", // 输出的文件名称规则, [name]表示上面entry中的key值(main) }, module: { // loader操作各种资源 loaders: [ { test: /\.css$/, // 匹配到.css文件 // 用css-loader与style-loader处理匹配到的文件,从右向左执行 loader: "style-loader!css-loader", }, ], }, };

用上面的配置的话,还需要安装css-loaderstyle-loader:

COPYBASH

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

安装后,我们再配置一个简单的目录:

COPYTEXT

`-out `-src `---css `---img `---js `-entry.js `-package.json `-webpack.config.js `-index.html

好了,我们编写 css 和 js 了。

在 css 目录中,我们创建一个 index.css:

COPYCSS

.main { background: #ccc; width: 400px; height: 400px; }

在 js 目录中,我们创建一个 index.js:

COPYJAVASCRIPT

function getTime() { console.log(Date.now()); } exports.getTime = getTime;

在 entry.js 中:

COPYJAVASCRIPT

require("./css/index.css"); import o from "./js/index.js"; console.log(o.getTime());

执行命令:

COPYSHELL

$ webpack -p

在 index.html 中引入./out/entry.js:

COPYHTML

<div class="main"></div> <script type="text/javascript" src="./out/entry.js"></script>

打开 index.html 就能看到效果了。

2. webpack 讲解

在 webpack.config.js 中:

entry 可以有多个入口,来对应多个页面,比如我还有一个分享页面:

COPYJAVASCRIPT

entry : { entry : './src/entry.js', share : './src/share.js' }

在新页面中,引入./out/share.js即可。

loader 是从右往左开始执行的,先执行 css-loader,再执行 style-loader。 css-loader 用来解析 css; style-loader 是将 css 样式用 style 标签插入页面的 head 里。而且在引入 loader 时,可以直接省略-loader

COPYJAVASCRIPT

module: { loaders: [ { test: /\.css$/, loader: "style!css", }, ]; }

在满足基本的配置后,我们需要满足更多的需求,比如我要用 SASS 编写 css,我要用 ES6 写 js,处理 CSS 中的图片等等。那么我们就得对 webpack.config.js 扩充配置:

COPYSHELL

$ npm install sass-loader url-loader file-loader babel-loader --save-dev

配置文件 webpack.config.js:

COPYJAVASCRIPT

output : { path : __dirname+'/out/', // 输出目录 filename : '[name].js', publicPath : __dirname+'/out/' // 图片路径 } module : { loaders : [ { test : /\.css$/, loader : 'style!css' }, { test: /\.(jpg|png)$/, loader: "url?limit=8192" }, { test: /\.scss$/, loader: "style!css!sass" }, { test: /\.js$/, loader: "babel" } ] }

好了,现在可以使用 sass, es6 了!

2.1 使用 ES6

在./js/index.js 中:

COPYJAVASCRIPT

// ./src/js/index.js class Student { constructor(name = "") { this.name = name; } sayHello() { console.log(`hello, ${this.name}!`); } } var wenzi = new Student("wenzi"); wenzi.sayHello();

2.2 独立的 CSS 文件

目前页面中的样式,是从 js 里加载的。如果我们想要把 css 独立到一个单独的文件中,就需要一个extract-text-webpack-plugin插件了:

COPYBASH

npm install extract-text-webpack-plugin --save-dev

webpack.config.js 中:

COPYJAVASCRIPT

// webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin"); plugins: [new webpack.BannerPlugin("created at " + new Date().toLocaleString()), new ExtractTextPlugin("[name].css")];

name 就是 entry 中的 key 值。

3. 命令行

刚才上面我们用的webpack -p来编译的,这里还有几个命令也可以使用:

COPYSHELL

# webpack 命令行的几种基本命令 $ webpack --config XXX.js # 使用另一份配置文件(比如webpack.config2.js)来打包 $ webpack -w # 提供watch方法,实时进行打包更新 $ webpack -p # 对打包后的文件进行压缩,提供production $ webpack -d # 提供source map,方便调试。

使用webpack --watch可以监控文件变化,实时编译;在要发布到线上时,使用webpack -p编译为压缩版本的文件。

4. 总结

关于 webpack 的内容依然还有很多,这里我们仅仅是做了一些入门的讲解。更多的内容可以查看官网。后续我们也会讲解 webpack 的高级应用等

标签:
阅读(472)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆