webpack4 搭建vue项目，从头开始踩坑记

webpack搭建项目流程和全部过程以及踩坑记

一 初始化项目

进入目录 npm init -y
生成默认的package.json

二 搭建开发服务，安装webpack，webpack-cli,webpack-dev-server

这里面有坑，版本之间兼容问题，我试的webpack5和webpack-dev-server3是不兼容的
如下是我安装的版本：

"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",

三 在项目根目录创建webpack.config.js

module.exports = {
   entry: './src/main.js',  // 入口文件，把src下的main.js编译到出口文件
   output: {     //出口文件
    path: path.resolve(__dirname, 'dist'), //出口路径和目录
    filename: "bundle.js",      //编译后的名称
    publicPath: "/"
  },
  mode: 'development', //开发模式
  devServer: { //本地开发的小 服务器 
        contentBase: path.join(__dirname, "dist/"),//提供内容的目录
        host: "localhost", //启动主机名
        port: "8080", //启动端口
        open: true, //自动打开浏览器
        compress: true, //gzip压缩
        hot: true, //启用热更新
        historyApiFallback: true, //该路径为打包后的首页路径即dist目录下的index.html页面(404情况)
  },
}

四 配置npm脚本 package.json

"scripts": {
    "serve": "webpack-dev-server",
  }

至此，我们启动脚本 npm run serve
在 浏览器上，我们已经能看到东西了

五 安装loader

一下是我安装的基本loader

"vue-loader": "^15.9.6",
"url-loader": "^4.1.1",
"style-loader": "^2.0.0",
"css-loader": "^5.0.1",
"babel-loader": "^8.0.4",

然后需要配置webpack.congfig.js

module: {
    rules: [ //遍历规则
      {
        test: /\.js$/, //匹配以js结尾的文件
        loader: "babel-loader", // 使用babel-loader编译
        exclude: /node_modules/ //node_module里面的内容不遍历
      },
      {
        //正则表达式匹配.css为后缀的文件
        test: /\.(css|scss)$/,
        //使用loader
        use: [
          { loader: 'style-loader' },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.(gif|png|jpg)$/,
        use: [{
            loader: "url-loader",
            options: {
                //图片小于10kb就是图片地址，大于正常打包成base64格式编码    
                limit: 10000,
               //输出路径
                outputPath: 'img/',
                esModule:false
            }
        }]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
       }
    ]
  },

六 安装babel，语法转换，提高兼容

babel 安装也有版本兼容问题
如下是我安装的

"@babel/core": "^7.1.2",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",

接着我们新建文件.babelrc 在项目根目录
添加：

{
    "presets": ["@babel/preset-env"]
}

七 安装vue

src新建main.js

import Vue from "vue";
import App from "./App.vue";

new Vue({
    // router: Router,
    // store: Store,
    render: h => h(App)
  }).$mount("#app");

八 区分环境，加载不同的配置

我们分为开发环境和生产环境。
我的想法是在根目录建webpack.config.js,配置公用的配置
在config目录下新建webpack.dev.config.js和webpack.prod.config.js,分别配置开发环境和生产环境的配置
利用webpack-merge合并webpack配置

最后附上项目地址：https://github.com/songfanfan0115/webpack-vue.git