webpack的安装与使用（单文件）

　　在安装 Webpack 前，你本地环境必须已安装nodejs。

　　可使用npm安装，固然因为 npm 安装速度慢，也可使用淘宝的镜像及其命令cnpm（npm install -g cnpm --registry=https://registry.npm.taobao.org），安装使用介绍参照：使用淘宝 NPM 镜像。

　　使用 cnpm 安装 webpack：

　　cnpm install webpack -g

　　安装完后，咱们能够在本地建立一个目录如project。命令：mkdir project

　　在project目录下建立一个index.js文件，代码以下：

　　document.write("Hello world!")

　　而后在project文件夹下建立index.html文件。代码以下：

　　

　　而后就可使用webpack命令来打包了。因为个人project是安装在桌面，所以个人操做是：

　　

　　执行以上命令会编译 index.js 文件并生成myScript.js 文件，成功后输出信息以下所示：

　　

　　在浏览器中打开index.html文件，结果以下：

　　

　　下面来建立另外一个js文件。index2.js文件代码以下：

　　module.exports = "Nothing is impossible！"

　　更新index.js文件以下：

　　document.write(require("./index2.js"));

　　接下来用webpack命令来打包：

　　webpack index.js myScript.js

　　完成后，在浏览器中打开index.html文件，结果以下：

　　

　　在页面启动时，会先执行index.js文件中的代码，其余模块会在运行require的时候再执行。

　　

　　Webpack 自己只能处理 JavaScript 模块，若是要处理其余类型的文件，就须要使用 loader 进行转换。

　　因此若是咱们须要在应用中添加 css 文件，就须要使用到 css-loader 和 style-loader，他们作两件不一样的事情，css-loader 会遍历 CSS 文件，而后找到 url() 表达式而后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

　　接下来咱们使用如下命令来安装 css-loader 和 style-loader(全局安装须要参数 -g)。

　　cnpm install style-loader css-loader  （注意是在要运行的js所在的目录环境下安装。也能够选择全局安装，惭愧，我没成功过）

　　执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。

　　接下来建立一个 index.css 文件，代码以下：

　　

　　而后修改index.js中的文件，代码以下：

　　

　　接下来使用webpack来打包：

　　webpack index.js myScript.js

　　完成后，在浏览器中打开index.html文件，结果以下：

　　

　　require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!

 

　　前面说的相对简单些，这里要说的稍微复杂一点的。

　　假如css文件存放在style文件夹中，而js文件存放在js文件中呢？这样使用webpack来打包又该如何操做呢？例如此刻个人目录结构是这样的。

　　

　　此时咱们须要改两个地方，其一，将index.js文件中的代码改成：

　　

　　而后将index.html加载的js文件的那部分改成：

　　

　　而后使用webpack来打包。命令以下：

　　

　　此时，在浏览器中打开index.html文件，结果以下：

　　

 　　补充：

　　如：webpack index.js myScript.js -p 表示将打包后的文件进行压缩

　　如：webpack index.js myScript.js -w 提供watch方法；实时进行打包更新，即保存后，再刷新页面便可能够看到代码生效了，无需从新运行webpack