一. webpack基本使用
webpack是一个前端模块化打包工具;
我们在node环境中, 安装了webpack包之后, 只需要新建一个main.js文件, 然后在这个文件和其他文件可以使用任何模块化规范(commonjs\amd\cmd\ed6都行)开发, 最后打包的时候只需要打包这个main.js文件, 其他js文件webpack会自动帮助我们打包的, 代码如下:
webpack ./src/main.js ./dist/buddle.js
然后在index.html中引入./dist/buddle.js即可;
二. webpack自定义快捷键
1. webpack
刚刚我们使用webpack ./src/main.js ./dist/buddle.js命令很麻烦啊, 能不能简单点, 可以, 就是自定义一个和src同级的webpack.config.js文件, 在这个文件里定义每次打包的入口文件和出口文件, 如图:
其中, output的path属性需要绝对路径, 所以, 需要使用导入node环境自带的path模块, 然后使用__dirname变量取得绝对路径;
如此, 便可以直接在终端中使用webpack命令打包了;
2. npm run build
还可以在packgae.json的scripts属性中定义build脚本, 这样,我们只要使用npm run build命令, node便会自动去找build脚本的内容并执行;
三‘ lorder
webpack如何处理除了js问价外的一些特殊文件呢?比如说css文件或者jpg文件?
1.处理css文件
先使用npm安装两个依赖
npm install --save-dev css-loader
npm install --save-dev style-loader
然后在webpack.config.js文件中配置,
2.加载less文件
3.加载图片文件
使用url-lorder
如果图片的大小超过了limit的限制13000kb, 所以可以要再安装一个file-lorder模块;
然后图片打包后它的路径是不对的, 需要配置一下, 我们可以在webpack.config.js中配置;
打包后的图片名称长度太长了, 可以通过在webpack.config.js文件配置name属性来设置;
4.es6语法转化为es5语法