资讯专栏INFORMATION COLUMN

超级详细的手写webpack4配置来启动vue2项目(附配置作用)

mtunique / 1907人阅读

摘要:基础目录结构以及各个文件的作用初始项目一路回车,一律使用默认的项目配置修改如下超级详细的手写配置来启动项目附配置作用说明用来启动命令这里将开发环境的配置传入到启动的中。

基础目录结构以及各个文件的作用

初始npm项目 npm init

一路回车,一律使用默认的npm项目配置

package.json修改scripts
如下:
{
  "name": "doing-a-webpack4-vue2-pro",
  "version": "1.0.0",
  "description": "超级详细的手写webpack4配置来启动vue2项目(附配置作用)",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "dev": "webpack-dev-server --config webpack/webpack.dev.config.js"
  },
  "engines": {
    "node": ">= 8.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
说明:  
npm run dev 用来启动命令 webpack-dev-server --config webpack/webpack.dev.config.js
这里将开发环境(development)的配置 webpack/webpack-dev-config.js 传入到启动的server config中。详情
故这里需要做两件事情:
a. npm install webpack-dev-server -D 开发依赖
b. 书写 webpack.dev.config.js
书写 webpack.dev.config.js
说明:  
由于 webpack.dev.config.jswebpack.prod.config.js 近似,所以手写一个 webpack.base.config.js来减少配置耦合量。
提示:base.configdev.config需要用webpack提供的 webpack-merge 来合并
故这里需要做两件事情:
a. npm install webpack-merge -D 这个放到后面安装config需要的依赖中一起做,稍后会写到
b. 书写 webpack.base.config.js
书写 webpack.base.config.js webpack/webpack.base.config.js
const path = require("path")
const { VueLoaderPlugin } = require("vue-loader")

const ifProd = process.env.NODE_ENV === "production" ? true : false

const config = {
  dev: {
    mode: "development",
    assetsPublcPath: "/",
    assetsSubDirectory: "./"
  },
  prod: {
    mode: "production",
    index: path.resolve(__dirname, "../dist/index.html"),
    assetsPublcPath: path.resolve(__dirname, "../dist"),
    assetsSubDirectory: "./"
  }
}
module.exports = {
  mode: ifProd ? "production" : "development",
  context: path.resolve(__dirname, "../"),
  entry: {
    app: "./src/main.js"
  },
  output: {
    filename: "[name].bulde.[hash:10].js",
    path: ifProd ? config.prod.assetsPublcPath : config.dev.assetsPublcPath
  },
  resolve: {
    extensions: [".js", ".vue"],
  },
  devServer: {
    quiet: true
  },
  module: {
    rules: [
      {
        test: /.vue$/,
        use: [
          {
            loader: "vue-loader",
          }
        ]
      },
      {
        test: /.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["babel-preset-env"]
        }
      },
      {
        test: /.css$/,
        use: ["vue-style-loader", "css-loader"]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
我们可以看到,这里base.config需要的开发依赖有:  
babel-loader@7 (7.x版本需要配合 babel-core babel-preset-env)
webpack (4.x版本需要配合 webpack-cli)
css-loader (需要配合 vue-style-loader)
vue-loader (需要配合 vue-template-compiler)
故在命令行执行如下命令
npm install -D babel-loader@7 babel-core babel-preset-env webpack webpack-cli
npm install -D css-loader vue-style-loader vue-loader vue-template-compiler
详细的配置说明解释几天后给出
回到 webpack.dev.config.js webpack/webpack.dev.config.js
const BaseConfig = require("./webpack.base.config")

const merge = require("webpack-merge")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = merge(BaseConfig, {
  plugins: [
    // https://github.com/ampedandwired/html-webpack-plugin
    // 这是一个webpack的插件来创建html文件渲染你的webpack生成的bundle
    new HtmlWebpackPlugin({
      // 写入bundle的那个index.html
      filename: "index.html",
      template: "index.html"
    })
  ]
})
我们可以看到,这里dev.config需要的开发依赖有:  
webpack-merge (前面提到的用来将dev.config和base.config合并的依赖)
html-webpack-plugin
故在命令行执行如下命令
npm install -D html-webpack-plugin webpack-merge
可以开始写vue啦! src/main.js
我们在上面的 webpack.base.config.js 中写到了 entry: {app: "./src/main.js"}  
这就是我们的vue入口了。如下:
import Vue from "vue"; // 引入vue
import App from "./App"; // 引入组件App

new Vue ({
  el: "#app", // 挂载到index.html中的#app上
  render: h => h (App) // 用App.vue渲染
})
src/App.vue
简单的一个首页


如上,我们需要引入vue,所以:  
npm install vue -S (自动安装2.x版本的vue)
最后 代码结构:

index.html


  
    
    
    
    
    doing
  
  
    
运行项目
npm run dev
源码地址
具体的项目源码地址:https://github.com/Sotyoyo/do...  
源码与本文章稍有出入,后期会做到统一,希望给个star支持一下!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53722.html

相关文章

  • 超级详细手写webpack4配置启动vue2项目配置作用

    摘要:基础目录结构以及各个文件的作用初始项目一路回车,一律使用默认的项目配置修改如下超级详细的手写配置来启动项目附配置作用说明用来启动命令这里将开发环境的配置传入到启动的中。 基础目录结构以及各个文件的作用 showImg(https://segmentfault.com/img/remote/1460000018271585?w=538&h=284); 初始npm项目 npm init 一...

    only_do 评论0 收藏0
  • webpack4+vue2+axios+vue-router多页+单页混合应用框架

    摘要:适用于主要入口页面生成多页,子页面和次要页面使用单页形式的项目。文件用来存放固定的数据,而文件可更加自由的处理并返回数据。 VUE2的单页应用框架有人分享了,多页应用框架也有人分享了,这里分享一个单页+多页的混合应用框架吧,node.js写了一个简单的mock服务也集成在里面,整体初现雏形,还有很多需要优化和改善的地方。。。 项目结构 │ ├─build ...

    whatsns 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    Terry_Tai 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0

发表评论

0条评论

mtunique

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<