配置一个完整项目的webpack

话不多说，直接上步骤：

1、创建一个项目，例如：webpack
在根目录(webpack)下建立两个文件夹 dist 和 src；
其中 src下创建文件夹如下：

2、在根目录下输入npm init -y 初始化项目，点击回车，这时项目中会生成一个 package.json 文件。如图：

3、使用 cnpm 安装 webpack ，运行指令 cnpm i webpack -D
4、运行指令 cnpm i webpack-cli -D
5、由于导入文件用的是ES6导入模块方式，ES6 的代码浏览器解析不了，所以要把他编译成浏览器可以解析的格式。 在命令行输入webpack .\src\main.js -o .\dist\bundle.js ，此时dist文件夹下多了一个文件bundle.js
注：①这两个路径分别是：要打包的文件的路径 ，打包好的输出文件的路径 ②一定要注意 webpack4.x版本打包命令多了一个-o
6、 在项目根目录下输入cnpm i webpack-dev-server -D (实时刷新页面)，解决了修改页面每次都要重新生成且编译 main.js 文件过于麻烦的问题。
7、在项目根目录下创建 webpack.config.js 文件，配置如下：

const path = require('path')
module.exports = {
  //在配置文件中我们需要手动指定入口和出口
  
  //入口 表示要使用webpack打包哪个文件
  entry:path.join(__dirname,'./src/main.js'),
  //出口 输出文件的相关配置
  output:{
    path:path.join(__dirname,'./dist'),//指定打包好的文件输入到那个目录中去
    filename:'bundle.js' //指定输出文件的名称
  }
}

在pakeage.json中配置如下：

此时，通过在控制台输入 npm run dev 即可打开页面。

到这里，webpack的基本框架已经搭建好了，接下来针对项目做进一步的搭建工作

一、 安装各种常用的包

在做项目时，我们经常要用到jQuery，bootstrap，vue，react，mint-ui等等，根据你自己的需求安装即可，命令如下（以jQuery为例）：cnpm i jquery -S

二、 安装loader加载器

1.装包。 运行命令 cnpm i style-loader css-loader -D ， cnpm i less-loader sass-loader -D， cnpm i url-loader file-loader -D ,

2.在webpack.config.js中做配置。

  //专门用于配置所有的第三方模块的 loader 加载器
    module: {
     rules: [   //这里是设置第三方加载器的匹配规则
      { test: /\.css$/, use: ["style-loader", "css-loader"] }, //处理css文件
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }, //处理less文件
      { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }, //处理sass文件
      { test: /\.(png|jpg|gif|bmp|jpeg)$/, use: "url-loader" },//处理图片路径的loader
      { test: /\.(otf|eot|svg|ttf|woff|woff2)$/, use: "url-loader" },//处理字体文件
     ]
  }

三、 安装babel插件

• 安装babel插件
  • 运行cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D
  • 运行cnpm i @babel/preset-env @babel/preset-stage-0 -D
• 在src目录下添加 .babelrc 配置文件

{
	"presets": ["@babel/preset-env","@babel/preset-react"], (stage-*已弃用)
    "plugins": ["@babel/plugin-transform-runtime"]
}

这样程序就能正常运行了！

接下来的项目又遇到了跟babel相关的问题，babel把ES6转化为ES5的时候报错，如下：运行指令cnpm i @babel-runtime --dev 问题解决！

到这里，一个完整项目的webpack已经基本搭建完成，在实际项目中，一定要根据你的需要下载安装插件！！！