vue-day03----webpack搭建vue环境、移动端适配（reset.css）
### webpack搭建vue环境
webpack工作原理：将入口文件需要的所有文件通过loader进行打包，在需要的时候直接引入。
1、初始化文件夹
创建webpackproject文件夹，在终端中打开，npm init -y
2、安装webpack以及webpack-cli
npm install webpack webpack-cli@3.3.10 -D
注意：这里确定webpack-cli的版本号，防止报错
3、创建config文件夹做开发环境和生产环境的配置
webpackproject文件夹下新建config文件夹，新建三个文件：
base.congif.js
dev.congif.js
pro.congif.js
4、创建src目录以及public目录
src下新建main.js（入口文件）
public下新建index.html
5、webpack基本配置项
entry
output
reslove
plugins
module
6、plugins常用的插件
html-webpack-plugin
clean-webpack-plugin
copy-webpack-plugin
extract-text-webpack-plugin----css加浏览器前缀，dev.config.js中使用
npm install html-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-text-webpack-plugin@next -D
注意：
①extract-text-webpack-plugin的安装：npm i extract-text-webpack-plugin@next -D
②extract-text-webpack-plugin的使用，需要在package.json的同级目录下新建postcss.config.js：
module.exports = { plugins:[ require("autoprefixer")({ overrideBrowserslist:[ "defaults", "Android 4.1", "iOS 7.1", "Chrome>31", "ff>31", "ie>=8", "last 2 versions", ">0%" ] }) ] }
7、常用的loader
①处理js的loader：
babel-loader
@babel/core
@babel/preset-env
npm install babel-loader @babel/core @babel/preset-env -D
②处理图片的loader
url-loader
file-loader
npm install url-loader file-loader -D
③处理css的loader
style-loader
css-loader
sass-loader
node-sass
postcss-loader
autoprefixer
npm install style-loader css-loader sass-loader node-loader postcss-loader autoprefixer -D
④处理vue单文件组件loader
vue-loader----解析单文件组件
vue-template-compiler
npm install vue-loader vue-template-compiler -D
根目录下创建 .babelrc 文件，配合babel-loader使用：
{ "presets":[ [ "@babel/preset-env", { "targets":{ // 配置项兼容到浏览器的最后两个版本 "browsers":["last 2 version"] } } ] ] }
8、合并webpack配置项
npm install webpack-merge -D
9、webpack服务
npm install webpack-dev-server -D
启动：
在package.json中scripts对象中添加
"build":"webpack --progress --config config/base.config.js"
npm run build
当pro.config.js文件写好后，改为
"build":"webpack --progress --config config/pro.config.js"
在package.json中scripts对象中添加
"dev":"webpack-dev-server --profress --config config/dev.config.js"
npm run dev ----> 地址栏输入localhost:9000
### 移动端适配
设置--->搜索cssrem--->
Fixed Digits 改为2----默认小数点后几位
Root Font Size 改为 50
index.html中引入reset.css：
@charset "utf-8"; /* CSS Document */ html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img { margin: 0; padding: 0; } fieldset,c { border: none; } img { display: block; } address,caption,cite,code,dfn,th,var { font-style: normal; font-weight: normal; } ul,ol,li { list-style: none; } body { color: #333; font: 12px PingFang SC, microsoft yahei, sans-serif; background: #fff; } a { color: #fff; text-decoration: none; } /*清除浮动*/ .clear { clear: both } * { box-sizing: border-box } .border-1px::after { content: ''; position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; pointer-events: none; } body,html,#app { height: 100%; background: #f5f5f5; } @media (min-width: 240px) { html { font-size: 32px; } } @media (min-width: 320px) { html { font-size: 42.66667px; } } @media (min-width: 360px) { html { font-size: 48px; } } @media (min-width: 375px) { html { font-size: 50px; } } @media (min-width: 384px) { html { font-size: 51.2px; } } @media (min-width: 411px) { html { font-size: 54.8px; } } @media (min-width: 414px) { html { font-size: 55.2px; } } @media (min-width: 424px) { html { font-size: 56.53333px; } } @media (min-width: 480px) { html { font-size: 64px; } } @media (min-width: 540px) { html { font-size: 72px; } } @media (min-width: 640px) { html { font-size: 85.33333px; } } @media (min-width: 720px) { html { font-size: 96px; } } @media (min-width: 750px) { html { font-size: 100px; } } @media (min-width: 768px) { html { font-size: 102.4px; } } @media (min-width: 800px) { html { font-size: 106.66667px; } } @media (min-width: 980px) { html { font-size: 130.66667px; } } @media (min-width: 1024px) { html { font-size: 136.53333px; } } @media (min-width: 1080px) { html { font-size: 144px; } } @media (min-width: 1152px) { html { font-size: 153.6px; } } @media (min-width: 1366px) { html { font-size: 182.13333px; } } @media (min-width: 1440px) { html { font-size: 192px; } } @media (min-width: 2160px) { html { font-size: 288px; } }
各个文件：
base.congif.js：
/** * 公用环境 * * */ const path=require("path"); const HtmlWebpackPlugin=require("html-webpack-plugin"); const {CleanWebpackPlugin}=require("clean-webpack-plugin"); const CopyWebpackPlugin=require("copy-webpack-plugin"); const VueLoaderPlugin=require("vue-loader/lib/plugin"); // 定义入口和出口文件路径 const PATH={ app:path.join(__dirname,"../src/main.js"), build:path.join(__dirname,"../dist") } // 基本配置 module.exports={ entry:{ app:PATH.app }, output:{ path:PATH.build, // process.env.NODE_ENV 用来判断是开发环境还是生产环境 filename:process.env.NODE_ENV=="development"?"js/[name].[hash:8].js":"js/[name].js" }, // 配置文件的有限引入方式 别名 resolve:{ extensions:[".vue",".js"], // 配置别名 alias:{} }, // 使用插件 plugins:[ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template:"./public/index.html", filename:"index.html", favicon:"./src/image/01.ico" }), new CopyWebpackPlugin([{ context:path.join(__dirname,"../public"), from:"**/*", to:path.join(__dirname,"../dist"), ignore:["index.html"] }]), new VueLoaderPlugin() ], module:{ rules:[ { test:/\.vue$/, loader:"vue-loader" }, { test:/\.js$/, loader:"babel-loader" }, { test:/\.(jpg|gif|png|svg)$/, use:{ loader:"url-loader", options:{ limit:2048, name:"img/[name].[ext]" } } }, { test:/\.(svg|woff|woff2|ttf|eot)$/, use:{ loader:"url-loader", options:{ name:"font/[name].[ext]" } } } ] } }
dev.congif.js：
/** * 开发环境 * * */ const baseConfig=require("./base.config"); const webpackMerge=require("webpack-merge"); const config=webpackMerge(baseConfig,{ mode:"development", module:{ rules:[ { test:/\.(css|scss)$/, use:["style-loader","css-loader","sass-loader"] } ] }, devServer:{ port:9000 } }); module.exports=config;
pro.congif.js：
/** * 生产环境 * * */ const baseConfig=require("./base.config"); const webpackMerge=require("webpack-merge"); const ExtractTextPlugin=require("extract-text-webpack-plugin"); const config=webpackMerge(baseConfig,{ mode:"production", module:{ rules:[ { test:/\.(css|scss)$/, // css抽离 use:ExtractTextPlugin.extract({ fallback:"style-loader", use:["css-loader","postcss-loader","sass-loader"] }) } ] }, plugins:[ new ExtractTextPlugin({ filename:"css/[name].[hash:8].css" }) ] }); module.exports=config;
main.js：
import Vue from 'vue'; import App from "./App.vue"; new Vue({ render:h=>h(App) }).$mount("#app");// #app是public/index.html中id为app的div /** * render（提供）是一种编译方式 * render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。 * template也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。 * * createElement(标签名称,属性配置,children) * * */
index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./font/iconfont.css"> <style> /* html{ font-size: 32vw; } */ </style> </head> <body> <div id="app"></div> </body> </html>
