webpack 开发构建

1、先准备一个 demo，接下来会逐步加深

      1）创建项目文件，注意名字不要起为 webpack；

            包含两个模块，前台展示 customer，后台管理 admin；

            每个模块都包含 index.html 、index.js

      2）使用命令行进入项目文件夹

                   初始化项目 ：npm init

                   安装依赖：cnpm i webpack-dev-server

      3）编辑webpack配置文件，webpack.config.js

      4）输入命令 webpack --process --colors，或者输入命令 webpack ，打包完成，可以看见dist文件夹

      5）输入命令 cnpm i -D webpack (可忽略，因为我的操作报错 cannot find module 'webpack')

      6）修改package.json中的 "scripts":{"start":"webpack-dev-server --progress --colors"}

      6）启动项目：npm start

            项目代码包下载    接下来所有代码都是在此基础之上做修改

2、页面可以自动刷新

      1）编辑 package.json，添加参数 --inline 在"scripts":{"start":"webpack-dev-server --progress --colors --inline"}里

      2）重启 npm start 查看效果

3、使用 plugin

      webpack 中的另一个非常重要的功能是 Plugins(插件)，是用来扩展webpack功能的，它们会在整个构建过程中生效，执行相关的任务

      Loaders 和 Plugins 常常会被弄混，但是他们其实是完全不同的东西

              Loaders 是在打包构建过程中用来处理源文件的(JSX、Scss、Less...)，一次处理一个

              Plugins 并不好自己操作单个文件，他直接对整个构建过程起作用

      1）配置 Plugin

            打开 webpack.config.js，编辑成如图所示：

           

            然后输入命令 webpack，如果报错：cannnot find module 'webpack'，请输入：cnpm i -D webpack

            查看 dist 文件夹中的两个 js 文件已经被压缩

4、使用 Loader

      1）css-loader 与 style-loader

            输入命令：cnpm install --save-dev style-loader css-loader
      2）编写一个 css 文件

      3） js 中引入 css 文件 require('./index.css')

      4）编辑 webpack.config.js 如图：

          

      5）输入命令 npm start，此时我的项目报错  Unexpected token：name （urlParts） [admin.bundle.js:317,4]

            知道原因是因为 webpack1 与 webpack2 编译方式不同，但是并未解决，请指教！！

            所以只能先删掉 webpack.config.js 中的 plugins 部分

      6）file-loader与 url-loader

            输入命令：cnpm install --save-dev file-loader url-loader

            编写 css,添加图片

            编写 webpack.config.js 如图：

           

            启动项目：npm start

      7）sass-loader 与 node-sass

            输入命令 npm install --save-dev sass-loader

            因为 sass-loader 依赖于 node-sass，所以还要安装 node-sass

            输入命令 npm install --save-dev node-sass

            新建scss文件，同时在 js 中引入

            修改 webpack.config.js ，如图：

           

            输入命令 npm start，启动项目

      8） babel-loader

             对 js 文件预处理，可以使用 es6 语法

             输入命令 npm install --save-dev babel-loader babel-core

             修改 js 文件为 es6 写法

             编辑 webpack.config.js，如图：

            

      9）减少打包时间

            可使用  noParse:[/文件名/]  //不去遍历某个文件

            可使用 include:/(文件名|文件名)/  //缩小loader处理文件的数量，增加打包速度，如图：

           

5、react 项目使用 webpack 打包