网站效果图用什么做,新野微网站建设,惠阳网站推广费用,安徽省建设厅执业资格注册中心网站用vue-cli1/2搭建一个vue项目时#xff0c;可以看到有很多关于webpack配置的文件。我们不需要知道那些繁琐的配置文件有什么作用#xff0c;只需在控制台输入npm run dev#xff0c;项目自动启动#xff0c;我们就可以愉快的写业务代码了。 虽然vue-cli帮我们做好了一切可以看到有很多关于webpack配置的文件。我们不需要知道那些繁琐的配置文件有什么作用只需在控制台输入npm run dev项目自动启动我们就可以愉快的写业务代码了。 虽然vue-cli帮我们做好了一切我们就能不用学webpack了吗NoNoNo...现代前端工程师必备的技能就是模块化构建打包项目不信去那些招聘网站的前端JD看看。废话不多说下面让我们用webpack构建一个简单的vue-cli。 第一步安装NodeJSwebpack基于NodeJS 下载地址http://nodejs.cn/download/傻瓜式安装一直下一步就ok。安装完毕在控制台输入node -v检查是否按照成功。 NodeJS是JavaScript的运行环境像浏览器一样。安装之后可以通过node命令运行JavaScript代码比如node a.js npmnode package manage of JavaScript作用Node.js下载后自带npm类似于迅雷下载资源可以下载项目所需的依赖模块/包。 允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。npm是国外的可能会比较慢建议安装cnpm安装方法npm install -g cnpm --registryhttps://registry.npm.taobao.org第二步npm init初始化生成package.json 首先建立一个空的项目文件夹进入文件夹shift右击出现【在此处打开命令窗口(W)】点击进入cmd控制台命令路径即为当前文件夹目录然后输入npm init -y回车之后会在根目录创建一个package.json。package.json用来存放整个项目的依赖模块/包当我们把整个项目迁移到别的地方使用时项目运行时会根据package.json的依赖参数自动下载所需模块/包。第三步安装webpack 命令npm install webpack3.12.0 --save-dev 测试webpack在本地是否可用webpack -v如果出现webpack为无效命令则使用全局安装webpacknpm install webpack3.12.0 -g。安装成功后就可以使用webpack命令玩耍了。 建议安装wepack3webpack4对vue-cli的兼容还不是很好 webpack可以看做是模块打包机它做的事情是分析你的项目结构找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言ScssTypeScript等并将其转换和打包为合适的格式供浏览器使用。 Grunt和Gulp的工作方式是在一个配置文件中指明对某些文件进行类似编译组合压缩等任务的具体步骤工具之后可以自动替你完成这些任务。 第四步webpack打包模块 很多文件类型比如vue、css、img、字体...需要我们配置相应的loader才能完成正确解析并打包。比如把css打包到js文件中需要安装css加载器安装命令npm install --save-dev style-loader css-loadercss-loader 和 style-loader二者处理的任务不同css-loader使你能够使用类似import 和 url(...)的方法实现 require()的功能style-loader将所有的计算后的样式用style/style加入页面中二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中 命令行打包不推荐 webpack {entry file} {destination for bundled file} // 如webpack ./js/main.js ./dist/bundle.js 自动创建dist目录 这种打包方式在js文件中引入css文件时要注明loaderrequire(style-loader!css-loader!../css/index.css) 注意顺序不能错 配置文件打包推荐需要在项目的根目录创建webpack.config.js.项目里配置如下 module.exports {entry: __dirname /src/main.js,// 入口文件可以多个 output: { path: __dirname /dist, // 绝对路径打包后的文件存放的文件夹 filename: build.js // 相对路径打包后输出的文件 }, // 1. 不同webpack版本配置loader的方式不同webpack3用loaderswebpack4用rules // 2. 命令行方式引入css的require(style-loader!css-loader!../css/index.css) 就可以写成 require(../css/index.css) module: { loaders: [ { test: /\.css$/, loader: style-loader!css-loader }, { test: /\.(jpg|png|jpeg|svg)$/, loader: url-loader, options: { // 大于10000字节会被打包成重命名的图片资源否则打包成base64 limit: 10000 // name: utils.assetsPath(img/[name].[hash:7].[ext]) } }, { test: /\.vue$/, loader: vue-loader }, { test: /\.js$/, loader: babel-loader, exclude: /node_modules/, options: { presets: [env], // 处理关键字es6/7/8/9...都能转化 plugins: [transform-runtime] // 处理函数 } } ] } } package.json中配置scripts:{build: webpack}webpack命令会默认运行webpack.config.js文件执行npm run build即可打包 第五步搭建webpack服务器 上面4步就可以完成项目的打包任务但是开发环境还需要更进一步配置。webpack-dev-server可以像php/java/.net...一样搭建为我们搭建一个服务器这样就可以热更新项目代码实现实时运行项目进而方便我们调试项目。 安装 npm install webpack-dev-server -g写入到依赖 npm install webpack-dev-server --save-dev配置命令scripts:{dev: webpack-dev-server --hot --inline} // 实现热更新和在线编译运行命令npm run dev输入localhost:8080/运行... // webpack-dev-server的默认端口是8080具体代码见https://github.com/tzy13755126023/webpack-vue-cli 最后webpack版本更新很频繁各种npm包也更新很频繁这就会导致一个兼容问题动不动就报错这点很让人头疼很容易会导致从入门到放弃。转载于:https://www.cnblogs.com/tzy1997/p/10963304.html
