Webpack--使用教程

webpack 可以将多种静态资源(js,css,png,less,sass等)转为一个静态文件,减少了页面的请求

 在安装 Webpack 前，你本地环境需要支持 node.js。

---

1.创建文件目录:myproject,   在myproject里面创建 build   src  public 三个文件 (build里面是打包后的文件; src是自己创建的源文件;public是调式   文件)

2.先安装node.js  (http://nodejs.cn/ )    安装完后 就自动有了npm 

3.安装cnpm  ( https://npm.taobao.org/ ):  sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

4. 安装webpack    sudo cnpm install webpack -g       (全局安装,一般都是要全局安装的 因为可能有很多地方需要用到)

5.安装webpack-cli     sudo cnpm install  webpack-cli -g

    (在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。)

6.终端输入: 先把文件拖进来 cd+ url  ; 然后输入 webpack   会在build里面产生一个bundle.js文件

7.安装package.js:  进入文件夹目录  然后sudo cnpm init  (一直按回车就行 成功后文件夹会出现一个package.json文件)

       package.json 这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等

8.创建本地服务器  sudo cnpm install --save-dev webpack-dev-server -g

      配置webpack.config.js文件  见下图:

9.在json文件里面 配置 "build":"webpack", "start" : "webpack-dev-server --open" 

10. 在public 文件里面创建一个index.html文件   里面引入<script src="bundle.js"></script>

11.在终端输入:npm start  就可以弹出调试页面

12.引入css文件:(webpack只能识别js)

    安装依赖 sudo cnpm install style-loader css-loader --save 

     congfig.js: 文件配置: 

    在main.js文件中引入css文件:   require("./mycss.css");

创建文件目录:myproject,   在myproject里面创建 build   src  public 三个文件 (build里面是打包后的文件; src是自己创建的源文件;public是调式   文件)