安装 在有node和npm环境的机器上可以直接使用命令行安装webpack
1、在桌面上创建一个 webpack文件夹 2、进入到webpack文件 3、创建package.json 文件，代码自动创建
npm initpackage.json文件
{ "name": "webpack", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "webpack": "^2.2.1" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }4、 安装webpack
安装的过程中可能会很慢，一直卡在那转圈。原因你懂得，我们上的是一个局域网，外面的世界不是你想看就能看的。。。。。如果你像我一样，不能FQ，那你就先暂停吧。执行下面的语句 npm config set registry https://registry.npm.taobao.org ``` // 安装Webpack npm install --save-dev webpack 用一下国内的良心镜像。你会发现再执行 npm install webpack --save-dev 会很快的安装完毕。安装完成之后，你会发现，项目中多了一个 node_modules文件夹里面有一个 .bin和webpack文件夹。此时我们打开终端，输入 webpack会提示 webpak不是内部命令。不用怕，因为这个执行文件在你的项目下的 node_modules\.bin 下面，只要将这个路径配入 环境变量的 path中去 ，就可以愉快的使用 webpack了！ **注意**：最好先配置package.json文件，我在安装的时候 3和4 反了，好久都没有安装成功 ## 简单使用 ## 1、回到之前的空文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。在这里还需要创建三个文件，index.html 文件放在public文件夹中，两个js文件（Greeter.js和main.js）放在app文件夹中，此时项目结构如下图所示 Greeter.js 代码 作用：只包括一个用来返回包含问候信息的html元素的函数。// Greeter.js module.exports = function() { var greet = document.createElement(‘div’); greet.textContent = “Hi there and greetings!”; return greet; };
main.js代码 作用：用来把Greeter模块返回的节点插入页面。//main.js var greeter = require(‘./Greeter.js’); document.getElementById(‘root’).appendChild(greeter());
html代码 作用：文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）Webpack Sample Project
**注意**你会发现没有创建bundle.js，不用担心，webpack会自动创建 2、简单使用Webpack 只需要指定一个入口文件，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack没有进行全局安装，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中属于如下命令//webpack非全局安装的情况 node_modules/.bin/webpack app/main.js public/bundle.js
结果如下图 可以看出webpack同时编译了main.js 和Greeter,js,现在打开index.html,可以看到如下结果 3、通过配置文件来使用Webpack 还是继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，并在其中进行最最简单的配置，如下所示，它包含入口文件路径和存放打包后文件的地方的路径。 webpack.config.js代码module.exports = { entry: __dirname + “/app/main.js”,//已多次提及的唯一入口文件 output: { path: __dirname + “/public”,//打包后的文件存放的地方 filename: “bundle.js”//打包后输出文件的文件名 } }
注意：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。 为了看出来效果我们修改一下Greeter.js中输出的文案，编译完成之后观看效果// Greeter.js
module.exports = function() { var greet = document.createElement(‘div’); greet.textContent = “测试一下 “; return greet; };
这次再运行webpack就不需要繁琐的指定从那个文件打包到那个文件，配置文件已经设置完毕node_modules/.bin/webpack
**更加快捷的打包方法** 执行类似于node_modules/.bin/webpack这样的命令其实是比较烦人且容易出错的，不过值得庆幸的是npm可以引导任务执行，对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可，设置方法如下。{ “name”: “webpack”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “dependencies”: { “webpack”: “^2.2.1” }, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1”, “start”: “webpack” }, “author”: “”, “license”: “ISC” }
然后在里面增加了 一句配置“start”: “webpack”
之后直接使用 代码 注意：不能使用一下代码“start”: “webpack” //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令
就是添加注释，我在运行的时候出错，如果你们没有出错，请自行绕过。npm start “` 注：package.json中的脚本部分已经默认在命令前添加了node_modules/.bin路径，所以无论是全局还是局部安装的Webpack，你都不需要写前面那指明详细的路径了。
npm的start是一个特殊的脚本名称，它的特殊性表现在，在命令行中使用npm start就可以执行相关命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build，以下是执行npm start后命令行的输出显示可以测试成功了，下一篇继续写 webpack的强大功能
