1. 初始化npm
npm init 复制代码
2. 全局安装webpack和webpack-cli
npm i webpack webpack-cli -g 复制代码
3. 将webpack添加到package.js的开发依赖
npm i webpack webpack-cli -D 复制代码
4. 创建src文件夹，并建立入口文件index.js
- index.js文件
function add(x,y) { return x + y; } console.log(add(1,2)); 复制代码
5. 运行指令
- 开发环境
webpack ./src/index.js -o ./build/built.js --mode=development 复制代码
上面这个指令的意思是将index.js文件打包后输出到built.js，整体打包环境是开发环境。
- 生产环境
webpack ./src/index.js -o ./build/built.js --mode=production 复制代码
6. webpack能够处理js/json资源
- 下面的json文件，webpack是能够进行打包的
{ "name": "justin", "age": 18 } 复制代码
7. Webpack不能处理CSS/img等其他资源
8. 如何使Webpack能够处理CSS样式资源
- 在src同一级而不是内部，建立webpack.config.js(注意：配置中的语法是基于CommonJs的语法的)
- 在webpack.config.js中添加如下代码
// resolve用来拼接绝对路径的方法 const {resolve} = require('path') module.exports = { // 入口起点 entry: './src/index.js', // 输出 output: { filename: 'built.js', // 输出路径 __dirname指的是当前文件上一层文件夹的绝对路径 path: resolve(__dirname,'build') }， // loader的配置 module: { rules: [], } // plugins的配置 plugins: [ { // 匹配哪些文件 test: /\.css$/, // 使用哪些loader进行处理 use: [ // 创建style标签，将js中的样式资源添加到head中生效 'style-loader', // 将css文件变成commonjs模块加载到js中，里面内容是样式字符串 'css-loader' ] } ], // 模式 mode: 'development' } 复制代码
- 安装相关包文件然后运行webpack
npm i npm i webpack webpack-cli -D npm i css-loader style-loader -D webpack 复制代码
9. Webpack处理less样式资源
- 不同文件类型需要配置不同的loader
- 下载less-loader
npm i less-loader 复制代码
- 下载less
npm i less -D 复制代码
- 修改webpack.config.js中的module中的rules
- 添加下面一个对象
{ test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } 复制代码
