webpack其实没那么可怕——官方文档解读

0、准备工作

下载完node.js之后根据安装提示一步步安装即可,node.js的兴起带来了一款叫做npm的包管理器

webpack模块可以被npm包管理器安装

安装webpack

//在全局安装webpack使用以下命令。
$ npm install -g webpack

webpack已经安装到计算机上,现在可以使用webpack命令了。

1、在项目中使用webpack

使用以下命令在项目根目录下生成package.json文件

$ npm init
	

使用sublimetext编辑器打开package.json文件应该是这个样子的。

2、安装webpack到项目中

将webpack加入到pageage.json配制文件中,使用以下命令

$ npm install --save-dev webpack
	

此时再看package.json文件,对比package.json刚刚创建时,新增加了一段代码。

"devDependencies": {
		"webpack": "^1.13.2"
	}

webpack依赖模块已经配置到我们的项目中了,并且项目目录中新增了一个node_modules的文件夹,打开文件夹可以看到我们刚刚安装的webpack模块。

3、webpack的版本

目前有两个可用的webpack版本,分为标准和测试版,测试版使用-beta标记区分。测试版包含不稳定和带有实验性质的特征,并且没有全面的测试。所以你应该使用标准版的webpack。

//后缀版本号安装相应版本
	$ npm install webpack@1.2.x --save-dev

4、开发工具

webpack-dev-server模块能快速配置一个本地的服务器,并且当每次保存修改过的代码后,测试服务器将立即自动刷新页面,省去了每次都要手动打包编译代码和刷新页面的的麻烦。

$ npm install webpack-dev-server --save-dev

5、配置webpack.config.js文件

接下来就小试牛刀,使用使用webpack做一个非常非常简单的操作。

  • 首先在项目根目录下新建两个文件夹,一个叫app,用来存放为打包前的源代码;另一个目录就叫dist,用来存放webpack打包输出后的文件。

  • 接着,在dist文件夹中新建一个html文档,我命名为index.html,并搭建好html文档的基本结构。

  • 之后,我们在app文件夹中新建一个js文件,命名为data.js,使用module.exports暴露一个接口。

  • 之后,新建一个index.js的文件,将data.js文件引入进来,编写javascript脚本将数据渲染到页面上。

  • 之后我们来配置webpack.config.js文件,将app文件夹中的index.js文件及其所有的依赖文件(目前只有data.js)打包编译成一个压缩的javascript文件。在项目根目录新建一个命名为webpack.config.js(webpack配置文件的默认写法,当然也可以自定义,后续再说。),开始写配置项。

  • webpack.config.js配置文件写好之后,在项目根目录打开git命令行面板,输入webpack,此时dist文件夹中就生成了webpack.config.js文件中定义的index.bundle.js输出文件了。

  • 不要忘了我们的冷落了半天的index.html,在html文档的末尾添加javascript文件引用,引用刚刚新鲜出炉的index.bundle.js文件到index.html中。

5、详解webpack.config.js配置

· 使用命令行配置

如果使用命令行工具(如git),命令行默认将读取webpack.config.js文件来打包源文件

//当在命令行输入webpack时,默认使用webpack.config.js文件配置
$ webpack

当然我们也可以自定义webpack的配置文件,如果使用自定义配置文件,可以这样写。

//使用自定义的webpack配置文件
$ webpack --config webpack.config_test.js
//--config选项告诉webpack使用webpack.config_test.js作为配置文件

那么,这个配置文件结构是怎么样的呢?

//webpack.config.js
module.exports = {
	//这里填写配置项
}

从上面代码可以发现,webpack.config.js文件输出了配置对象。

· 使用node.js API配置

如果我们使用node.js API,我们就需要通过参数来传递配置对象,如下代码。

webpack({
	//配置项在这里填写
},function(){
	//回调函数
})

· 更复杂的配置项

//在命令行中编译文件使用如下命令
$ webpack app.js app.bundle.js

上方命令执行后,将把app.js编译成app.bundle.js文件

使用命令行的缺点就是我们每次要编译编写的代码时,都要写这么长的命令,如果我们设置妥当的webpack.config.js配置文件,那么webpack可以监听文件改变,自动的执行编译打包命令

//监听文件改变,自动编译
$ webpack -w

· 配置文件怎么写?

首先我们必须清楚,一提到配置文件,并不一定严格按照json格式编码,所以我们不需要写非常纯正的JSON语法到配制文件中,只需要使用Javascript语法即可,因为它只是node.js的一个模块

下面是一个非常简单的配置对象例子:

{
	context: __dirname + "/app",
	entry: "./entry",
	output: {
		path: __dirname + "/dist",
		filename: "bundle.js"
	}
}
  • context

    上下文选项用来决定根目录(即绝对路径)的入口文件

  • entry

    打包文件的入口点。

    1、如果我们给entry复赋值一个字符串:这个字符串将会在开始编译的时候被加载。

    entry: "./app.js"

    2、如果我们给entry赋值一个数组:这个数组中的所有模块在编译启动时都将被加载,对后一个数组元素将被输出。

    entry: ["./entry1.js","./entry2.js"]

    3.如果我们给entry赋值一个对象,那么我们就创建了多个入口的绑定,对象的“键”名可以在output中使用name获取到,“值”可以是一个字符串也可以是一个数组。

    {
    	entry:{
    		page1: "./page1.js",
    		page2: ["./entry1.js","./entry2.js"]
    	},
    	output:{
    		filename: "[name].bundle.js",
    		chunkFilename: "[id].bundle.js"
    	}
    }
  • output

    output选项告诉webpack如何编译文件到硬盘中,值得注意的是,虽然entry中可以使用一个对象传入多个入口点文件,但是只能给ouput设置一个配置项

    output.filename

    这里定义了输出的文件名,谨记只能填写文件名,不能包含目录。

    output.path

    这个选项告诉webpack要把编译后的文件输出到硬盘的什么位置上,filename被用来确保输在这个目录中的文件是独一无二的。

    单入口文件的写法

    {
    	entry: "./src/app.js",
    	output: {
    		path: "./bulit"
    		filename: "bundle.js"
    	}
    }

    多入口文件的写法

    {
    	entry: {
    		app: "./src/app.js",
    		search: "./src/search.js"
    	},
    	output:{
    		filename: "[name].js",
    		path: __dirname + "/built"
    	}
    }
  • output.publicPath

    publicPath用来指定输出文件的公共URL地址,当我们在浏览器浏览的时候需要配置它

    
    //config.js
    output:{
    	path: "/home/proj/public/assets",
    	publicPath: "/assets/"
    }
    //index.html
    
    	
    
    

以上就是webpack最长用的配置项,下面是更高级的配置,比如使用ES6(ES2015)的语法需要配置babel-loader,在js中引入css样式文件如要style-loader、css-loader,开发react应用需要配置react加载器等等。

下载loaders加载器

下面是开发基于react的webapp时需要配置的项。

首先要用npm下载这些模块们

//下载babel-loader模块
$ npm install --save-dev babel-loader
//下载babel-preset-es2015,这样确保babel能解析ES6的最新特性
$ npm install --save-dev babel-preset-es2015
//下载react模块
$ npm install -save-dev react
//下载babel-preset-react,babel才能解析react的语法特性
$ npm install --save-dev babel-preset-react

<<<babel官网>>>

Babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码。Babel是所有ES6转换编译器中与ES6规范兼容度最高的,甚至超过了谷歌创建已久的Traceur编译器。Babel允许开发者使用ES6的所有新特性,而且不会影响与老版本浏览器的兼容性。此外,它还支持许多不同的构建测试系统,使开发者很容易将它集成到自己的工具链中。

在webpack.config.js中配置loaders

module: {
	loaders: [
		{
			test: /\.jsx$/, 
			loader: 'babel-loader', 
			query:{
				presets:['es2015','react']
			}
		}
	]
},

这样我们就能借助webpack这个神奇的工具专注于webapp开发本身,而不必为其他不必要的琐事搅扰~

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页