关于vue.js:从零搭建webpack
webpackwebpack_ 是一个古代 JavaScript 应用程序的_动态模块打包器(module bundler)_。当 webpack 解决应用程序时，它会递归地构建一个_依赖关系图(dependency graph)_，其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 _bundle_。 一.装置webpacknpm init -y初始化我的项目npm i webpack@4.43.0 webpack-cli@3.3.12 webpack-dev-server@3.11.0 -D这里我指定了版本号 因为他们三个是须要相互依赖的，版本不对启动时会报错 二.配置的前置条件 一.新建build文件夹build webpack.base.js //兼容开发环境和生产环境的配置webpack.prod.js //生产环境的配置webpack.dev.js //开发环境的配置二.在根目录新建src文件夹src index//主入口文件，相当于vue中的main.js三.配置package.json新增scripts配置 "scripts": { "dev": "webpack-dev-server --env=dev --config build/webpack.base.js", "build": "webpack --env=prod --config build/webpack.base.js"}dev的配置 webpack-dev-server：应用下面咱们装置的webpack-dev-server插件帮咱们本人起一个服务--env是前面用来辨别环境的标识--config build/webpack.base.js：是运行此命令时启动该文件prod的配置 webpack:打包命令前面两个与dev的配置雷同三.配置进口入口及依据执行的命令合并webpack.base.js let dev = require('./webpack.dev');//引入开发环境配置let prod = require('./webpack.prod');//引入生产环境配置let {resolve} = require('path');//应用path.resolve将门路解析成绝对路径let {merge} = require('webpack-merge');//执行npm i webpack-merge -D装置合并文件的插件module.exports = (env) => {//env为下面设置的--env=xxx let isDev = env === 'dev' ? true : false;//判断如果是开发环境则返回true否则返回false let base = {//配置兼容开发和生产 entry: resolve(__dirname, '../src/index.js'),//入口文件 output: {//进口文件 filename: 'bundle.js',//生成的js文件名 path: resolve(__dirname, '../dist')//生成在哪个目录下 } } isDev ? merge(base, dev) : merge(base, prod);//依照传进来的参数进行合并}webpack.dev.js ...