全局安装webpack的方法
cnpm i webpack -g
安装到项目中去的方法是
cnpm i webpack --save-dev
借助jq,需要先给项目安装一个jq包,这里需要初始化
package.json
就是管理你本地安装的npm
包,用于定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。一个package.json
文件可以做如下事情:
展示项目所依赖的npm
包
允许你指定一个包的版本[范围]
让你建立起稳定,意味着你可以更好的与其他开发者共享
webpack配置入口出口文件
配置好后,只需要执行webpack就可以对入口js进行编译,只要每次更改js,就需要直接执行webpack命令就可以了
我们每次修改js查看样式,都会要执行一遍webpack命令,这样很麻烦,有没有方便的办法,修改以后,就自动刷新页面呢?而不需要执行命令webpack
需要安装一个插件
cnpm i webpack-dev-server -D
通过上面的 npm run dev
命令就可以运行安装的插件
上面的方法,把bundle.js放进了内存中去,这样更快的修改及查看,我们还能不能把。html文件也放入到内存中去,这样可以更快的查看呢?
如何让webpack可以编译css文件?
css文件里面的url,webpack不能处理,也是需要安装插件
bootstrap的使用
babel的配置安装(webpack里面有不少es6 es7的高级语法,webpack不能识别,所以需要安装babel来转译)
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
即使安装了还是会报一个错。经过各种测试,发现是插件版本不兼容
解决办法,就是删除你的node_modules。把你的package.json
对应的插件版本修改如下
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
然后再次重新安装 cnpm i
~~~ 这样就可以啦
复习webpack配置的流程
注意:
VS CODE 结束指令的快捷键为 ctrl+C