手撸 webpack4.x 配置（一）

现在的前端开发框架 ，都绕不开 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 -g

webpack -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 配置  哈哈 ! 

第一次写博客 ， 代码被压缩了 不知为什么 ？ 求大神们指点 ，所以最后贴图了 ！

转载于:https://juejin.im/post/5c88afcff265da2dc538f7e0