Webpack 做项目
1 . 创建一个文件夹,并创建以下文件夹:
Css、js、 src、 dist、images
Note:
src里面放index.html,和js的入口文件‘main.js’
dist里面将会生成webpack打包‘mian.js’后的文件
2.Npm对项目的初始化,运行:npm init –y;
会生成一个package.json文件,用来记录项目中通过npm下载调用的插件,
如:‘jquery.js’、‘bootstrap.js’
3.如果要用到jquery,则在控制台或者项目根目录下运行npm install jquery –S
‘-S’是用来将该文件依赖写入到package.json文件。
4. 在main.js文件里导入需要的插件,如:import $ from jquery,接着就可以在该文件写js代码了
5.用webpack打包写好的main.js代码文件,
运行 webpack main.js(路径) -o dist/bundle.js
Note: 因为打包编译在写代码的时候会频繁操作,不可能每次都手动去输入命令进行打包,所以在根目录下创建一个’webpack.config.js’文件,具体配置查看官网;
6.上面的配置文件配置好后,运行命令webpack就可以就行打包了。
7.为了自动打包,我们可以安装一个工具 ‘webpack-dev-server’,
运行 npm i webpack-dev-server –D
安装好后,配置package.json文件,如下:
如果这个工具要正常运行,必须在本地安装webpack,哪怕在全局已经安装过都不行。
8.运行:npm run dev就可以自动打包了;
打包好的文件可以http://localhost:8080/bundle.js访问查看
这个bundle按照上面的地址来看,是在根目录下,但是会找不到这个文件,其实webpack把这个文件存到了内存中,以虚拟的形式托管到了项目的根目录中,虽然看不到,但是他和node_module文件夹平级,存到了内存中主要是为了快!!
9.可以设置
打包后自动直接打开浏览器,也可以设置端口号,定义打开的路径src
Hot可以让页面无刷新重载,而且只打包main.js文件里更新的代码部分,这样速度更快
10.html-webpack-plugin插件
这个插件可以将页面生成到内存中去,并且我们原来的页面不需要再引入js,因为在内存中生成的页面会自动在页面中引入js.
安装:npm intall html-webpack-plugin
安装好后在webpack.config.js中配置该插件
11.webpack只能打包js文件,不能打包css文件,如果需要打包,我们需要安装一款处理样式表的插件,运行:npm I style-loader css-loader -D
打开webpack.config.js文件,在里面新增一个配置节点,叫做module,他是一个对象,在这个module对象上,有一个rules属性,这个属性是个数组,这个数组中存放了所以第三方文件的匹配和处理规则
Noted:还有图片、字体的第三方的loader处理,这里就不多说了
12.Webpack只能处理ES6的一部分语法,ES7不支持,所以要借助第三方的loader来处理,Babel就可以处理
运行:npm i babel-core babel-loader babel-plugin-transform-runtime –D
再运行:npm i babel-preset-env babel-preset-stage-0 -D
安装完后配置webpack.config.js文件,如下:
然后在项目的根目录下新建一个‘.babelrec’的babel的配置文件,这个文件的语法满足json格式
Note:具体的babel配置必须查看官网