webpack开发配置

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

Paste_Image.png

（1）在安装webpack前，需要安装nodejs，因为需要借助node中的npm

（2）上篇《借助node，搭建vue环境》文章已经说明用到cnpm，需要安装淘宝镜像

（3）安装webpack，检测是否安装成功

Paste_Image.png

（4）创建一个目录

Paste_Image.png

在对应的路径下可以找到这文件夹app

Paste_Image.png

把这文件夹导入webstorm中，然后在app文件夹下新建一个js文件，html文件（不一定需要把项目导入工具里，只是方便查看文件和修改文件）

Paste_Image.png

Paste_Image.png

注意:需要先输入一句cd app，把相应的项目名称显示在命令行里才针对某一项目来执行指令使用webpack命令来打包

Paste_Image.png

（5）打包出现的文件

Paste_Image.png

Paste_Image.png

（6）打包后，运行index.html文件出现这些内容（借助于webstrom工具的运行环境）

Paste_Image.png

（7）再创建一个js文件

Paste_Image.png

（8）更新上面创建的runoob1.js内容

Paste_Image.png

（9）再使用webpack命令来打包

Paste_Image.png

（10）打包后，再运行index.html（借助于工具的运行环境）

Paste_Image.png

注意：

Paste_Image.png

（11）安装css-loader style-loader

Paste_Image.png

安装好后就会在当前目录生成node_modules 目录

Paste_Image.png

（12）需要新建一个webpack.config.js文件

Paste_Image.png

（13）创建一个css文件

Paste_Image.png

（14）更改runoob1.js文件内容

Paste_Image.png

（15）打包出现问题，打包不了

Paste_Image.png

注意：!style!css!是旧版本才可以直接写

解决方法：

Paste_Image.png

Paste_Image.png

修改后才打包成功

Paste_Image.png

运行结果

Paste_Image.png

（16）安装 less-loader

Paste_Image.png

执行上面和下面其中一个指令应该都可以

Paste_Image.png

（17）创建一个less文件

Paste_Image.png

（18）在前面新建的webpack.config.js文件中加上less-loader

Paste_Image.png

（19）需要在runoob1.js中修改内容：

Paste_Image.png

（20）若像这样修改，输入webpack打包就会报错

Paste_Image.png

解决方法：把style-loader!css-loader也要加上

Paste_Image.png

Paste_Image.png

补充下面文件内容：
可以在index.html中body添加内容，less打包后可以显示div的pin类名的样式

Paste_Image.png

Paste_Image.png

运行结果（这里是借助工具的运行环境）

Paste_Image.png

补充：
将一些编译选项放在配置文件中（可是这样设置就会重复输出多一次runoob2.js中的内容）

Paste_Image.png

如下图：

Paste_Image.png

（21）内置插件：
插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工作。

使用内置插件需要输入cnpm install webpack命令来安装：

Paste_Image.png

（22）修改 webpack.config.js

Paste_Image.png

（23）输入webpack命令

Paste_Image.png

打开 bundle.js，可以看到文件头部出现了我们指定的注释信息。

Paste_Image.png

（24）开发环境

Paste_Image.png

Paste_Image.png

安装全局webpack-dev-server -g

Paste_Image.png

（25）使用 webpack-dev-server 开发服务

Paste_Image.png

（26）最后在浏览器里输入localhost:8080，不用借助webstorm工具的运行环境，就可以利用本地端口8080运行

Paste_Image.png

补充说明：
1）若你修改了js文件内容或者样式文件内容，浏览器会相对应自动刷新更新，不用手动刷新
2）若需要改端口，可以输入--port=xxxx的命令

Paste_Image.png

3）若按了ctrl+c终止cmd时，8080端口就不能用了，这点要注意，需要重新配置命令

Paste_Image.png

注意：
样式引入哪个才能相对应引用显示哪个样式文件的样式；若引用了后缀为.less的文件名，需要改.css后缀的文件样式，也没效果显示出来；反之也一样。

Paste_Image.png

Paste_Image.png

本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping