Webpack学习笔记

来源：互联网发布：阿里云主机硬盘1g价格编辑：程序博客网时间：2024/06/08 06:45

Webpack学习笔记

参考文档：http://www.jianshu.com/p/42e11515c10f

安装

使用npm进行安装：

//全局安装

npm install -g webpack

//安装到项目目录

npm install --save-dev webpack

安装完毕使用webpack -v查看版本信息。

快速入门

1.首先创建npm说明文件package.json，可以使用在项目目录下使用npm init创建（然后中观提示输入项目信息）。

2.为本项目安装webpack：npm install --save-dev webpack

3.创建index.html(引用的bundle.js是webpack打包后的js脚本)、greeter.js、main.js如下：

//index.html

<!DOCTYPE html>

<title>Webpack Sample Project</title>

</head>

<body>

</body>

</html>

//greeter.js

module.exports = function() {

var greet = document.createElement('div');

greet.textContent = "Hello Webpack!";

return greet;

};

//main.js

const greeter = require('./greeter.js');

document.querySelector("#root").appendChild(greeter());

4.运行命令：webpack main.js bundle.js打包为bundle.js文件。然后使用浏览器打开index.html即可看到页面。

5.还可以使用配置文件来配置Webpack，配置文件名为webpack.config.js，如下：

module.exports = {

entry: __dirname + "/main.js",//入口文件

output: {

path: __dirname,//打包后的文件存放的地方

filename: "bundle.js"//打包后输出文件的文件名

}

//__开头的变量都是node.js的全局变量

现在便可以直接使用webpack命令进行打包了，该命令会自动读取配置文件信息。

6.通过npm start调用webpack打包任务，配置package.json如下：

{

"name": "com.conan",

"version": "1.0.0",

"description": "",

"main": "main.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start":"webpack"

"author": "",

"license": "ISC"

}

现在可以通过命令npm start调用webpack任务了。

7.配置生成sourceMap（调试用），修改webpack.config.js即可。

module.exports = {

devtool: 'eval-source-map',

entry: __dirname + "/main.js",//入口文件

output: {

path: __dirname,//打包后的文件存放的地方

filename: "bundle.js"//打包后输出文件的文件名

}

使用npm start命令后，会生成eval-source-map类型的sourceMap到bundle.js。

8.使用本地服务器：首先安装webpack-dev-server，命令如下：

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

然后配置npm配置文件package.json如下：

{

"name": "com.conan",

"version": "1.0.0",

"description": "",

"main": "main.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "webpack",

"server": "webpack-dev-server --open"

"author": "",

"license": "ISC",

"devDependencies": {

"webpack-dev-server": "^2.7.1"

}

现在使用npm run server命令启动本地服务器，然后会自动打开浏览器。

9.Loaders能够调用外部工具编译非js代码。插件用于丰富webpack的功能。

...

阅读全文

0 0