1.文件结构
2.安装 webpack、webpack-cli
$ npm init
$ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -D //(开发环境)
安装 css-loader 、style-loader.(处理 CSS 文件)
$ npm i style-loader@1.1.3 css-loader@3.4.2 -D //(开发环境)
安装 less less-loader.(处理 LESS文件)
// 安装 less less-loader $ npm i less@3.11.1 -D $ npm i less-loader@5.0.0 -D
3. 新建 src 文件夹:
src 文件夹下新建 index.css 文件
src 文件夹下新建 index.less 文件
src 文件夹下新建 index.js (webpack 入口文件)
3.1 新建 build 文件夹(用于存放打包后生成的 js 文件):
3.2 新建 webpack配置文件: webpack.config.js (处理打包文件的主要逻辑都在这个文件中实现)
4.编写代码:
index.css
body,html{ padding: 0; margin: 0; height: 100%; background-color: pink; }
index.less
#title{ color:#fff }
indes.js
import './index.css'
import './index.less'
webpack.config.js
/* webpack.config.js webpack的配置文件 作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置） 所有构建工具都是基于 nodejs平台运行的~ 模块化默认采用commonjs。 */ // resolve 用来拼接绝对路径的方法 const {resolve} = require('path') module.exports = { // webpack 配置 // 入口起点 entry: './src/index.js', // 输出路径 output: { // 输出文件名 filename: 'built.js', // __dirname: nodejs 变量，代表当前目录的绝对路径 path: resolve(__dirname, 'build') }, // loader 配置 module: { rules: [ // 详细loader配置 // 不同文件必须配置不同 loader 处理 // 这里是处理 css 文件的配置 { // 配置哪些文件 test: /\.css$/, // 使用哪些loader进行处理 use: [ // use数组中loader执行顺序：从右到左，从下到上 依次执行 // 创建style标签，将js中的样式资源插入进行，添加到head中生效 'style-loader', // 将css文件变成commonjs模块加载js中，里面内容是样式字符串 'css-loader' ] }, { test:/\.less/, use:[ 'style-loader', 'css-loader', //将 less 文件编译成 css 文件 //需要下载 less-loader 和 less 'less-loader' ] } ] }, // plugins 配置 plugins: [], // 模式 mode: 'development'//开发模式 // mode:'production'//生产模式 }
5.打包
$ webpack
打包后在build文件夹下生成 built.js 文件
6.在build 文件夹下新建 index.html 文件，并引入打包后生成的文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h5 id="title">HELLO</h5> <script src="built.js"></script> </body> </html>
预览
end~