作为一个刚入门的前端小白，也想像其他大神一样写一些高内涵东西。无奈自己技术不到家，所以呢只能先把自己的爬坑路程记录下来，一点一滴记录自己的成长。
这是我的第一篇文章，废话不多说，下面开始动手。
准备工作：
一切开始之前先构建一下我们的项目结构，新建一个web-demo的文件夹，里面具体文件结构看下图
先在文件里面写一点点东西，方便我们调试的时候判断是否成功
//style.css
* { padding: 0; margin: 0; box-sizing: border-box;}
h2 { font-size: 28px; color: royalblue;}复制代码//index.html
<html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1,minimum-scale=1,user-scalable=no "> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <article id="app"> <h2> hello word </h2> </article></body></html>
复制代码一切准备就绪之后，开始正式工作
一、构建基于webpack的前端开发环境
1.初始化项目
在根目录打开命令行工具（推荐使用gitbash）执行 npm init
npm init复制代码之后会有一段基本配置工作，如包名、描述、版本号等等，这里先默认enter
然后就会在根目录下生成一个package.json文件
{
"name": "web-demo", //包名
"version": "1.0.0", //版本号
"description": "", //项目描述
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}复制代码2.安装webpack
webpack4.0之后需要单独安装webpack-cli
npm install webpack -webpack-cli -D复制代码安装成功之后在根目录新建一个webpack.config.js。这个是webpack的配置文件，之后我们所有的配置工作基本上都在这个文件中进行。
一般webpack的配置项包括以下几项
module.exports = {
entry: '', // 入口文件
output: {}, // 出口文件
module: {}, // 处理对应模块-各种loader
plugins: [], // 各种需要的插件
devServer: {}, // 服务器相关配置
mode: 'development' // 环境模式配置
}复制代码我们先从入口和出口文件开始：
const path = require('path')
module.exports = { entry: ['./app/js/main.js'],
output: {
//[name]意思是打包后文件名和入口文件一致
//[hash]用来添加一个hash串
filename: '[name].[hash:4].js',
//打包后存放在根目录dist文件夹下面
path: path.resolve(__dirname, 'dist')
}}复制代码完成之后我们打开package.json文件，修改一下script
"scripts": {
"build": "webpack", 用来执行打包操作
"test": "echo \"Error: no test specified\" && exit 1"
},复制代码现在我们就可以执行以下打包操作了
npm run build 复制代码运行之后我们就会看见在项目根目录下生成了一个dist文件夹以及一个.js文件
3.解析打包html模板文件：
这个时候需要我们安装一个，插件——html-webpack-plugin
npm install html-webpack-plugin -D复制代码安装完成之后，在config.js中配置引用一下
const path = require('path')//引入插件const HtmlwebpackPlugin=require('html-webpack-plugin')
module.exports = { entry: ['./app/js/main.js'], output: { //[name]意思是打包后文件名和入口文件一致 //[hash]用来添加一个hash串 filename: '[name].[hash:4].js', //打包后存放在根目录dist文件夹下面 path: path.resolve(__dirname, 'dist') }, plugins:[ //通过new一个类来使用刚才引入的插件 new HtmlwebpackPlugin({ template:'./app/views/index.html', //模板文件的位置 }) ]}复制代码现在再次打包一下，这时候就会有.html文件了。
我们这个时候可以在浏览器中运行一下这个index.html
可以看到确实是我们之前所写的内容，并且js文件也在页面中引入了。
但是同时也发现，由于每次的hash都不同 ，导致目录下存在很多个.js文件。这时候我们需要安装一个插件来帮我们解决这个问题。
安装clean-webpack-plugin，这个插件的主要功能是每次打包前清空dist目录
走起
npm install clean-webpack-plugin -D复制代码同样也需要在config.js中引入并且new一个类
const path = require('path')//引入插件const HtmlwebpackPlugin=require('html-webpack-plugin')const CleanWebpackPlugin=require('clean-webpack-plugin')
module.exports = { entry: ['./app/js/main.js'], output: { //[name]意思是打包后文件名和入口文件一致 //[hash]用来添加一个hash串 filename: '[name].[hash:4].js', //打包后存放在根目录dist文件夹下面 path: path.resolve(__dirname, 'dist') }, plugins:[ //通过new一个类来使用刚才引入的插件 new HtmlwebpackPlugin({ template:'./app/views/index.html', //模板文件的位置 }), new CleanWebpackPlugin('dist'),//指定需要清空的文件夹 ]}复制代码再次执行打包的时候就不会存在多个无用的.js文件了
4.做前端怎么能少得了css
需要解析css文件我们需要安装一些，loader。style-loader以及css-loader
npm install style-loader css-loader -D复制代码loader的使用和插件有些不一样，具体请看代码
const path = require('path')//引入插件const HtmlwebpackPlugin = require('html-webpack-plugin')const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = { entry: ['./app/js/main.js'], output: { //[name]意思是打包后文件名和入口文件一致 //[hash]用来添加一个hash串 filename: '[name].[hash:4].js', //打包后存放在根目录dist文件夹下面 path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, plugins: [ //通过new一个类来使用刚才引入的插件 new HtmlwebpackPlugin({ template: './app/views/index.html', //模板文件的位置 }), new CleanWebpackPlugin('dist'),//指定需要清空的文件夹 ]}复制代码配置完了之后，才入口文件main.js中导入我们刚才的style.css文件
import '../css/style.css'复制代码再次执行打包，但是我们发现，并没有生成css文件。在浏览器中运行一下
可以看到，这时候的css样式是以style标签的形式嵌入的，我们需要的是应该以link的方式引入的才对。
再次请一个插件，帮我们把css提取出来。
npm install mini-css-extract-plugin -D复制代码安装完成继续配置config.js
const path = require('path')//引入插件const HtmlwebpackPlugin = require('html-webpack-plugin')
//清空dist文件夹const CleanWebpackPlugin = require('clean-webpack-plugin')
//分离cssconst MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = { entry: ['./app/js/main.js'], output: { //[name]意思是打包后文件名和入口文件一致 //[hash]用来添加一个hash串 filename: '[name].[hash:4].js', //打包后存放在根目录dist文件夹下面 path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, //使用分离插件之后，不需要style-loader了 use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [ //通过new一个类来使用刚才引入的插件 new HtmlwebpackPlugin({ //模板文件的位置 template: './app/views/index.html', }),
//指定需要清空的文件夹 new CleanWebpackPlugin('dist'), new MiniCssExtractPlugin({ //分离后的css文件名 filename: 'style.css', }) ]}复制代码再次执行一次打包
可以看到，css文件已经分离出来了。
并且是以link的方式引入的。
5.图片也是不可缺少的的
在实际开发中有三种引入图片的情况，背景图片、img标签以及图片字体。
这个时候我们需要用三个loader来帮助我们完成以上的功能
npm install url-loader html-withimg-loader file-loader -D复制代码配置config.js(这里就不贴出来完整代码了)
rules:[
{ test: /\.(jpe?g|png|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192, // 小于8k的图片自动转成base64格式 outputPath: 'images/' //图片打包后的文件夹 } } ] }, { test: /\.(htm|html)$/, use: 'html-withimg-loader' }, { test: /\.(eot|ttf|woff|svg)$/, use: 'file-loader' }
]复制代码我们可以修改一下模板文件，添加一个img标签
<body> <article id="app"> <h2> 赛博朋克2077 </h2> <img src="../img/bg.jpg" style="width:500px;" alt="赛博朋克"> </article></body>复制代码再次执行打包，然后运行
完美！
6.重要的———静态服务器
这里需要安装一个webpack-dev-server
npm install webpack-dev-server -D复制代码安装完成之后，配置config.js。
devServer: { contentBase: './dist', host: 'localhost', // 默认是localhost port: 3000, // 端口号 open: true, // 自动打开浏览器}复制代码同时在package.json中添加一个执行代码
"scripts": { "build": "webpack", "dev": "webpack-dev-server", "test": "echo \"Error: no test specified\" && exit 1" },复制代码运行
npm run dev复制代码这个时候程序会自动打开浏览器，并且显示一个我们开发中的页面。
到这里一个简单的基于webpack的前端开发环境就配置好了。
下面就开始我们的重头戏
二、在项目中使用VUE
1.准备工作，修改一下项目内的文件，
添加App.vue，/router/index.js，home/index.vue
2.安装我们需要的组件
vue、vue-router、vue-loader、vue-template-compiler
npm install vue vue-router vue-loader vue-template-compiler -D复制代码同样安装完成需要的config.js中配置一下
const path = require('path')
//解析VUE文件const VueLoader = require('vue-loader/lib/plugin')
module.exports = { entry: ['./app/js/main.js'], output: { //[name]意思是打包后文件名和入口文件一致 //[hash]用来添加一个hash串 filename: '[name].[hash:4].js', //打包后存放在根目录dist文件夹下面 path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ new VueLoader() ]}复制代码之后，再修改一下入口文件以及我们新建的三个文件
首先是main.js
import Vue from "vue" //vue模块import App from "./App.vue" //vue的入口文件import router from "./router" //路由文件，用于页面管理import '../css/style.css' //样式文件
Vue.config.productionTip = false
//新建一个vue对象new Vue({ el: "#app", router, components: { App }, template: "<App/>",})复制代码App.vue
<template> <div id="app"> <router-view/> </div></template>
<script>export default { name: "App"};</script>复制代码index.js
import Vue from 'vue'import Router from 'vue-router' //导入路由模块import Index from '../home/index.vue'
//使用路由Vue.use(Router)
//新建路由export default new Router({ routes: [ { path: "/", name: "Index", component: Index } ]})复制代码index.vue——这个是我们的主页面
<template> <div> <h2> helloword </h2> </div></template><script>export default {};</script>复制代码一切完成之后运行一下服务器
npm run dev复制代码额，一片空白。查看一下浏览器Console
然后查找资料，原来是默认的vue是runtime版本，需要完整版才可以解析vue模板。
所以，修改一下config.js。添加一个resolve让我们导入的时候可以加载vue的完整版
.....
devServer: { contentBase: './dist', host: 'localhost', // 默认是localhost port: 3000, // 端口号 open: true, // 自动打开浏览器 }, resolve: { alias: { 'vue': 'vue/dist/vue.js' } },
.....
复制代码ok再次运行。现在我们就可以看到一个红色的hello word的了
至此，我们已经可以开发简单vue的项目了
三、收尾
在实际开发中还有一些工作要做
1.比如使用scss预处理器
npm install sass-loader node-sass -D复制代码配置config.js
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}复制代码修改我们的style.css文件名称为style.scss
然后在main.js中将import '../css/style.css'，改成import '../css/style.scss'
继续运行一次 npm run dev
我们同样在浏览器中看到了红色的helloword
但是如何判断此时预scss生效了呢？我们可以修改一下样式，使用sass的语法
$red:#d31919; //定义一个变量h2 { font-size: 30px; color: $red;引用这个变量}复制代码再次运行 npm run dev
这次我们可以看到hello word的颜色已经变了。我们可以审查元素一下
可以看到，颜色值是我们定义的那个变量的值。
使用css预处理器可以实现css的模块化，代码复用、快速栅格化等等各种操作我会在我的下一篇文章中，将一些常用的sass语法列举出来。
扫一扫
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
