山东汽车行业网站开发,网站风格趋势,厦门网站建设公司首选乐振,海洋seo步骤1 #xff1a;新建文件夹 my-vue-cli
步骤2#xff1a; 在文件夹中输入npm init (拥有npm管理环境)#xff0c;之后可以安装我们所需要的包
步骤3#xff1a;安装 webpack、webpack-cli (webpack打包工具#xff0c;webpack 执行依赖webpack-cli) npm i webpack w…步骤1 新建文件夹 my-vue-cli
步骤2 在文件夹中输入npm init (拥有npm管理环境)之后可以安装我们所需要的包
步骤3安装 webpack、webpack-cli (webpack打包工具webpack 执行依赖webpack-cli) npm i webpack webpack-cli -D
步骤4在跟目录下新建src(放项目主要代码)、public(放公用静态资源)
public/index.html
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlemy-vue-cli/title/headbodydiv idapp/div/body/html
src/main.js
import { add } from ./tools/add.js
console.log(add(1, 2))
console.log(我是main.js)
src/tools/add.js
export const add (a, b) {return a b
}
步骤5入口文件webpack打包需要从入口文件开始查找一直到打包所有引用文件
进行入口文件的配置在根目录下新建webpack.config.js
const path require(path)module.exports {// 模式 开发模式mode: development,// 入口文件 main.jsentry: {main: ./src/main.js},// 输出output: {// 输出到 dist文件夹path: path.resolve(__dirname, ./dist),// js文件下filename: js/chunk-[contenthash].js,// 每次打包前自动清除旧的distclean: true,}
}
步骤6配置打包命令
package.json
scripts: {build: webpack
},
此刻运行命令 npm run build就能发现打包成功 出现dist/js/chunk-c3454564....接着我们需要在index.html文件中 引入打包出来的js ,并且可以打包html 文件才可以。
步骤7如何打包html
打包html需要用到html-webpack-plugin插件npm i html-webpack-plugin -D。需要在webpack.config.js 中配置
const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {// 刚刚的代码...// 插件都放 plugins 中plugins: [new HtmlWebpackPlugin({// 选择模板 public/index.htmltemplate: ./public/index.html,// 打包后的名字filename: index.html,// js文件插入 body里inject: body,}),]
}
此刻在运行npm run build可以看到html被打包且打包后的html 自动引入了打包后的js 文件
步骤8打包CSS
在src 文件夹下创建styles 文件夹用来存放样式 src/styles/index.scss,在 入口文件main.js中引入 import ./styles/index.scss
需要安装 sass、sass-loader:可以将scss代码转换成css css-loader 使webpack具有打包css的能力 sass-resources-loader 可选 支持打包全局公共scss 文件 mini-css-extract-plugin:可将css代码打包成一个单独的css文件
npm i sass sass-loader sass-resources-loader mini-css-extract-plugin -D
配置webpack.config.js
// 刚才的代码...
const MiniCssExtractPlugin require(mini-css-extract-plugin)
module.exports {// 刚才的代码...plugins: [// 刚才的代码...new MiniCssExtractPlugin({// 将css代码输出到dist/styles文件夹下filename: styles/chunk-[contenthash].css,ignoreOrder: true,}),],module: {rules: [{// 匹配文件后缀的规则test: /\.(css|s[cs]ss)$/,use: [// loader执行顺序是从右到左MiniCssExtractPlugin.loader,css-loader,sass-loader,// {// loader: sass-resources-loader,// options: {// resources: [// // 放置全局引入的公共scss文件// ],// },// },],},]}
}
此时打包可以看到index.html 文件引入了css 打包图片用asset-module
此时我们完成了打包html、css、 js 和图片 下篇文章继续介绍 babel(将高级语法转换成低级语法兼容一些低版本的浏览器) 打包vue 热启动 环境区分 构建打包进度条 以及source-map(快速定位代码出错位置)等内容
