webpack的基本使用过程
一、基本使用
- 新建两个文件src和dist,src用来存放源码(main.js,使用commonJS或者ES6模块化写的文件),dist文件夹用来存放打包之后的文件。
- vscode中右击src,选择在“在集成终端中打开”,命令行输入:
webpack ./src/main.js ./dist/bundle.js
该命令作用是,告诉webpack,用webpack这个工具把src中的main.js文件以bundle.js的名字打包到dist文件夹中。webpack在打包的时候会先判断是否有依赖(导入导出),会自动处理各种模块之间的依赖,根据依赖找到需要打包的其他文件,所以只需要打包一个包含入口的文件main.js。 - 在index.html中引入bundle.js文件即可
<script src="./dist/bundle.js"></script>
- 如果需要修改代码,运行之前只需重新打包即可
二、webpack.config.js和package.json配置
为简化打包时的命令行,只需输入webpack+回车就可以进行打包
- 在与index.html同级目录里添加文件webpack.config.js(不要更改名字,暂时是固定的),写上代码:
//通过require导入node里面的全局的一个path的包
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
//path里面要写绝对路径,且动态获取,需要用到node语法
//path是一个模块,里面有一个resolve函数
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
}
需要装上包含path的包
2. 在终端输入npm init + 回车
则在同一个根目录下会生成package.json
再在终端输入:npm install可解决对node的其他依赖问题
3. 现在在终端直接输入webpack + 回车,就可以进行打包了三、 使用npm run build进行打包
开发中更常用的是使用npm run build进行打包,只需在package.json里面加上:“build”: “webpack”
使用npm run build命令另一个好处是,build里面的webpack会优先使用本地安装的webpack,而在终端(包括全局终端)直接输入webpack使用的是全局的webpack。
四、局部安装webpack
有的项目里面本地需要用到的webpack版本与全局用到的版本不一样,所以需要给本地安装一个webpack:
在终端输入:npm install webpack@3.6.0 --save-dev + 回车
安装完成后会发现在package.json中多了:
–save-dev是开发时依赖,项目打包后不需要继续使用的。
四、loader
除了JS代码处理,也需要加载CSS、图片,将ES6转换成ES5、将TypeScript转换成ES5代码、将.jsx、.vue转换成js等,只需给webpack扩展对应的loader。
贴一个webpack中文文档网站:webpack中文文档 安装css-loader,注意css-loader只负责将CSS文件进行加载,不负责解析:
- 在终端输入:npm install --save-dev css-loader
- 在webpack.config.js文件中加上:
module: {
rules: [{
test: /\.css$/,
use: ['css-loader']
}]
}
注意这里,先不要运行npm run build去重新打包,会报错TypeError: this.getResolve is not a function,我就是弄了好久没找到原因,最后百度查到应该是版本的问题,所以在安装的时候可以加上版本:npm install css-loader@2.0.2 --save-dev,如果已经装了之前那个,就先卸载:npm uninstall css-loader,再重装:npm install css-loader@2.0.2 --save-dev。
3. 再重新打包:npm run build
安装style-border,style-border负责将样式添加到DOM中,过程相同:
- 安装:npm install style-loader --save-dev(这里没有碰到版本问题)
- 配置:在webpack.config.js文件中加上:
module: {
rules: [{
test: /\.css$/,
// 使用多个loder时,是从右向左
use: ['style-loader', 'css-loader']
}]
}
- npm run build
就可发现CSS被解析出来了