webpack开发配置
在页面启动时,会先执行 runoob1.js 中的代码,其它模块会在运行 require 的时候再执行。

(1)在安装webpack前,需要安装nodejs,因为需要借助node中的npm
(2)上篇《借助node,搭建vue环境》文章已经说明用到cnpm,需要安装淘宝镜像
(3)安装webpack,检测是否安装成功

(4)创建一个目录

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

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


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

(5)打包出现的文件


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

(7)再创建一个js文件

(8)更新上面创建的runoob1.js内容

(9)再使用webpack命令来打包

(10)打包后,再运行index.html(借助于工具的运行环境)

注意:

(11)安装css-loader style-loader

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

(12)需要新建一个webpack.config.js文件

(13)创建一个css文件

(14)更改runoob1.js文件内容

(15)打包出现问题,打包不了

注意:!style!css!是旧版本才可以直接写
解决方法:


修改后才打包成功

运行结果

(16)安装 less-loader

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

(17)创建一个less文件

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

(19)需要在runoob1.js中修改内容:

(20)若像这样修改,输入webpack打包就会报错

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


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


运行结果(这里是借助工具的运行环境)

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

如下图:

(21)内置插件:
插件在 webpack 的配置信息 plugins 选项中指定,用于完成一些 loader 不能完成的工作。
使用内置插件需要输入cnpm install webpack命令来安装:

(22)修改 webpack.config.js

(23)输入webpack命令

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

(24)开发环境


安装全局webpack-dev-server -g

(25)使用 webpack-dev-server 开发服务

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

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

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

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


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