自己配置前端开发环境（一）

刚开始的时候，最近跟几个小伙伴聊了下如何不用vue-cli，使用vue配置开发环境。于是萌生了写这篇文章的想法，总结记录下自己配置开发环境的心得。工具和框架的安装是因为我习惯使用vue，而大部分的模块管理工具都是webpack，所以这里我们在开发和生产环境中使用webpack来管理和打包包，使用vue来构建页面。安装我们新建一个文件夹，进入文件夹mkdirjon-clicdjon-clinpm初始的话npminit然后一路yes（或者你也可以使用npminit-y，可以直接全部yes）接下来安装我们的包管理工具webpacknpminstall-save-devwebpackwebpack-cli注意：这里的-save-dev是安装webpack作为开发环境，我们也安装了webpack-cli，因为webpack4.0拆开后webpack和webpack-cli会合并。然后还有一个要注意的??：网上有教程说需要全局安装webpack-cli，其实没有必要，我也建议不要这样做，因为安装后可能需要很长时间webpack-cliglobal如果你不更新，那么你的项目的开发版本可能会发生变化，这会导致版本不兼容的问题。配置项目文件结构我们在安装webpack后在jon-cli目录下已经有了package.json和package-lock.json文件，现在我们新建一个src目录和config来存放我们的项目资源和webpack配置文件mkdirsrcconfig然后我们在config目录下新建三个文件来拆分webpack的公共配置、开发环境配置和生产环境配置。touchwebpack.common.jswebpack.dev.jswebpck.prod.js在src目录下新建一个main.js文件作为webpack的入口包文件，现在我们的目录是这样的：进行简单打包下面我们来写webpack的基本配置打开webpack.common.js，写入如下内容constpath=require("path");letconfig={mode:process.env.NODE_ENV==="development"?“开发”：“生产”，条目：path.resolve（__dirname，“../src/main.js”），输出：{path：path.resolve（__dirname，“../dist”），文件名：“bundle.js",},};module.exports=config;下面解释一下上面的配置：首先，webpack运行在node端，所以我们可以使用node自带的包，我们引入path来处理文件路径；定义一个配置对象；mode：支持两种模式，分别是development开发模式和production生产模式（默认是这种模式）。我们也可以在webpack的配置文件中不配置mode，可以在npmscripts命令中配置modewebpack--mode=productionentry:包入口文件路径usage:entry:string|Array|{[entryChunkName:string]:string|Array}这里我们配置的是单页应用，多页应用我们先不讨论对于entry的具体使用，这里entry的值是一个字符串，表示路径需要打包的入口文件output:输出打包后的文件Usage:output:{path:"",//输出文件路径filename:"output[hash][name].js",//输出文件名，you可以使用[hash]会输出带有hash值的文件，这样在使用html生成插件时可以插入带有hash值的js文件，可以避免文件缓存；[name]的用法是将入口中的键值（Objectusage）导入导出文件}接下来引入webpack.dev.js文件中的常用配置，将开发环境配置与公共环境配置合并，exportitconstcommon=require("./webpack.common");constmerge=require("webpack-merge");module.exports=merge(common,{});这里我们使用webpack-merge合并配置，你可以使用npminstall-save-devwebpack-merge来安装它然后我们在mian.js文件中写一些代码functiontest(){console.log("thisistestfunction!");}编辑我们的npmscripts命令package.json文件中的"scripts":{"start":"NODE_ENV=developmentwebpack--config./config/webpack.dev.js",}，现在可以在控制台使用npmrunstart命令打包文件;另外，npm在5.2版本命令后增加了npx，npx用于调用项目内部安装的模块，所以我们也可以直接使用npxwebpack打包文件。但是我们这里用的是script，它是带参数的，比如当前环境写的NODE_ENV参数是开发环境，还有--config的webpack配置文件参数。打包完成后，我们可以看到在jon-cli目录下多了一个dist目录。这是我们打包后生成的目录。里面有一个js文件。现在我们的目录结构是这样的：js文件的文件名是由我们配置的output选项中的filename属性决定的。这串数字是我们配置的时候的[hash]，为什么没有显示[name]呢？这是因为我们当前的条目使用的是字符串形式。这里的name对应entry中的key和object形式中的keyvalue，所以我们这里没有。关于输入和输出，我这里不再赘述。我们将在下一篇文章中讨论如何配置多页应用程序。现在我们可以打开dist下的js文件，在文件中可以找到我们在main.js文件中写的代码（这里没有贴图）。现在我们已经配置了一个基本包？..