在页面启动时，会先执行 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
网友评论