现在的前端开发框架 ，都绕不开 webpack 打包 。 但绝大数前端开发人员 基本都是用 脚手架 自动生成 一套开发环境 如： vue-cli , create-react-app等 , 但开发中总会遇到各种问题 ，基本都是 webpack 配置问题 ， 每次遇到基本都是头疼的问题 ，根本不敢动里面的配置文件 。所以出于以后开发中 更好的理解 wepback配置问题 ，决定自己搭建一套 前端开发环境 ！
一 先到node官方网站 下载 node
node官网： nodejs.org/en/
个人建议 下载稳定版本的即可 ，无需最新版的 ！
新建文件夹 （ webpack-demo1 ）
先创建两个文件 webpack-demo/src/index.js
二 安装webpack
(1) 全局安装
npm install webpack webpack-cli -gwebpack -v // 查看是否安装成功复制代码(2) 局部安装 安装项目中 （webpack-demo1） 里
进入 webpack-demo 目录 ，这里我们先初始化一个工程
npm init 复制代码这里一路 回车就可以了 ， 最后一个 yes 就初始化完了
npm install webpack webpack-cli --save-dev // 或者 npm install webpack webpack-cli -D 复制代码这样的话 webpack 就安装到项目中了 。
webpack -v // 这波操作 其实打印出来的 版本还是 全局的复制代码我们可以先把全局 webpack 删除 来测试下
npm uninstall webpack webpack-cli -g复制代码这时我们再在终端里 输入：
webpack -v 复制代码不管是在全局还是项目中 都会报错
这里稍微有一点变化 ， 我们进入项目（webpack-demo1）中输入 ：
npx webpack -v // 这时就可以正确的显示 项目中安装的 webpack 版本号复制代码这时我们就可以安装一些 依赖包了
npm install 复制代码这时你的文件目录应该就和我的一样了
其实这时我们可以在 项目中 新建 (webpack-demo1/index.js) 文件 ，输入： console.log("ok");
这样我们就可以打包了 。
npm webpack index.js复制代码这时项目中 就会多个 dist 目录 里面有 main.js 文件
说明我们已经打包成功了 ,这是 webpack 给我们默认的配置。
三 修改 webpack打包配置
这时我们需要新建一个 配置文件 （ webpack-demo1/webpack.config.js ）
const path = require('path');
module.exports = { entry: './src/index.js', // 打包的入口文件 output: { path: path.resolve(__dirname, 'dist'), // 打包后的文件目录 filename: 'bundle.js' // 打包后生成的 JS 文件 }};复制代码这时我们把打报入口改为 src/index.js 文件了
npx webpack src/index.js 复制代码同样可以成功打包 ！
我们修改下 打包命令 ，打开 package.json文件
{ "name": "webpack-demo1", "version": "1.0.0", "description": "", "scripts": { "build": "webpack" // 注意这一行 }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.29.6", "webpack-cli": "^3.2.3" }}复制代码这时候 我们就可以愉快的打包了
npm run build复制代码同样的可以成功打包。
webpack 其实只是JS文件打包工具 ， 但这很显然是远远不够的 ，工作中我们需要打包各种各样的 静态资源 !
那就需要我们的 loader 插件了 !
四 安装 loader 打包 图片资源
npm install file-loader --save-dve复制代码这里我们继续修改 package.json 配置文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: { path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{ loader: 'file-loader', options: {}
}]
}
]
}
};复制代码这是我们的配置就已经完成了 ，接下来我们可以测试下
打开 webpack-demo1/index.js 文件
import file from './assets/file.jpg'复制代码这时候 我们在打包 , 这里我们需要 在 dist 目录下 新建 index.html 文件把 bundle.js文件引入里面 ！
打开 index.html 我们就可以看到 我们的图片了 ！
大家也可以使用安装 ( url-loader )
npm install url-loader --save-dev复制代码主： file-loader 能做的 , url-loader 都可以做到
只有一点区别
module.exports = {module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192 //区别： 当图片小于 8192时 , 会自动转化为 base64 位 引入方式 ！}}]}]}
}复制代码准备下班了 ， 简单描述 ， 直接贴代码了 ！
五 安装 loader 打包 css 样式资源
同样安装
npm install css-loader style-loader --save-dev
复制代码const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'file-loader',
options: {}
}]
},
{
test: /\.(css)$/,
use: [{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
},
{
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}
]
}
]
}
};复制代码这样我们就可以打包 样式文件了 。
这里我们也可以安装 css 预处理器 （ 如： less, sass, stylus ）
npm install stylus stylus-loader --save-dev复制代码我们把上面的 配置文件稍微的改变下 就可以了
改天继续完善 - 要下班了 ！
请大神门手下留情 ， 本人也是刚刚学习 webpack 配置 哈哈 !
第一次写博客 ， 代码被压缩了 不知为什么 ？ 求大神们指点 ，所以最后贴图了 ！
