如何手动搭建一个vue项目

概念

定义：静态模块打包器(module bundler)
解释：把所有依赖的文件生成一个图，打包成boundle文件

安装

创建项目前，确保安装了nodejs
md 文件夹名   //创建文件夹
cd /文件夹名  //进入文件夹目录
npm init -y  //初始化项目
npm i webpack webpack-cli -D  //本地安装

准备文件

创建public文件夹
index.html

创建src文件夹
index.js 主入口文件

import {header} from './header.js'
document.body.append(header);

header.js

var header =document.createElement("div");
header.innerHTML="你好webpack from header";
export {header};

配置文件

在项目目录 新建一个webpack.config.js webpack默认配置文件

// 引入node的 path路径模块
const path = require('path')
// module.export node中导出模块的意思  
module.exports={
    entry:'./index.js',
    // 指定文件的入口
    output:{
        filename:'main.js',
        // 定义文件名
        path:path.resolve(__dirname,'dist')
        // 定义文件夹 
        // __dirname获取当前目录
        // path.resolve 方法将路径或路径片段的序列解析为绝对路径
    }
    // 指定打包好的出口
}

配置 scripts

"scripts":{
    //添加打包和运行
    "build": "webpack",
    "serve": "webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
}

安装

npm i webpack-dev-server -D   //安装后让我们可以重启服务器

配置完可以执行

npm run build   //打包
npm run serve    //运行

配置模式

const path = require('path')
module.exports={
mode:'development', //开发模式
// mode:'production',// 产品模式
entry:'./index.js',
output:{
    filename:'main.js',
    path:path.resolve(__dirname,'dist')

插件安装

npm i html-webpack-plugin  //模板

webpack.config.js

const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={   
mode:'production',
entry:'./src/index.js',
output:{
    filename:'main.js',
    path:__dirname+'/dist'
},
plugins:[
    new htmlWebpackPlugin({
        template:'./src/index.html'
    })
]
}

项目目录如下

 public
    index.html
 src
   header.js
   index.html
   index.js

filename: ‘index.html’ 默认情况下生成的 html 文件叫 index.html

filename:'youIndex.html'

minify压缩 去空格

//这个可以把生成的 index.html 文件的内容的没用空格去掉，减少空间。
minify: {
  collapseWhitespace: true,
},

处理css

css-loader 分析css关系-合并一个css（import）
style-loader 把css挂载到head里面
mini-css-extract-plugin 把css抽取到单独文件
optimize-css-assets-webpack-plugin用于压缩css文件，它将在webpack构建期间搜索css资源，并将优化/最小化css
less less-loader 处理less文件

npm install css-loader style-loader mini-css-extract-plugin  optimize-css-assets-webpack-plugin -D

index.js

import {header} from './header.js'
import './css/style.css'
import './css/style.less'
document.body.append(header);

webpack.config.js

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={ 
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
            
          }),
    ]
}

webpack-dev-server

webpack-dev-server 本地服务
clean-webpack-plugin 清理dist目录

安装

 npm install   clean-webpack-plugin webpack-dev-server  -D

webapck.config.js添加如下设置

module.exports = {
devServer: {
    host: 'localhost', //主机地址，默认是localhost
    port: '8080', //端口号，默认8080
    open: true, //自动打开页面
    hot:true,//热更新
},
};

package.json中添加开发环境启动指令

//执行npm run dev，即可在开发环境下运行项目了
{
  "scripts": {
    "dev": "webpack serve"
  }
}

webpack.config.js添加如下配置

module.exports = {
devServer: {
    proxy: {
        //哪些访问需要代理转发
        '/api': {
            target: 'http://47.110.129.207',//目标服务器
            changeOrigin: true, 
            secure: false,  
            credentials: 'include', 
            pathRewrite: {
                '^/api': '' //重写路径，不需要重写则为‘’
            }
        }
    }
}
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
    devServer: {
        contentBase: './dist',
     },
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    // mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main-[hash].js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
            
          }),
    ]
}

图片与文件处理

file-loader可以解析项目中的url引入（不仅限于css）使之指向正确的文件

url-loader 会将小图片生成base64编码格式(url-loader封装了file-loader)

image-webpack-loader 插件可将大的图片进行压缩从而缩小打包体积

html-loader html 代码里处理 img 标签的 loader。

style.css

@import '../assets/font/iconfont.css';
div{ color:red;}
body{ background-image: url('../assets/sun.jpg');}

index.js

import {header} from './header.js'
import './css/style.css'
import './css/style.less'
import pic from './assets/pic1.jpg'
document.body.append(header);

var img = new Image();
img.src=pic;
 

// img.src=pic;
document.body.append(img);
var box = document.createElement("div");
box.innerHTML='<span class="iconfont icon-shouye1"></span> <span class="iconfont icon-shouye"></span>';
document.body.append(box);

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
    devServer: {
        contentBase: './dist',
     },
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    // mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main-[hash].js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[
        
        {
            test: /\.(png|jpg|gif|jpeg|ico)$/,
            use:[{loader:'url-loader',options:{limit:50000,name: 'img/[name].[hash:5].[ext]'},'image-webpack-loader']
        },
        {
            test:/\.css$/,
            use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
        },
        {
            test:/\.(eot|woff2|woff|ttf|svg)/,
            use:[{loader:'url-loader',options:{limit:10,name: 'font/[name].[hash:5].[ext]'}}],
        },
        {
            test:/\.less$/,
            use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
        }
    ]
},
plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        template:'./src/index.html'
    }),
    new MiniCssExtractPlugin({
        filename: 'style.css',
        
      }),
]
}

设置目录别名

module.exports = {
resolve: {
    alias: {
        '@': path.resolve(__dirname, './src'), //设置@为src目录的别名
    }
},
};

public公共静态资源目录拷贝

npm install --save-dev copy-webpack-plugin

webpack.config.js添加如下配置

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        new CopyWebpackPlugin(  // 设置静态目录（拷贝文件到另外一个文件夹）
			{patterns:[  
				// { from: __dirname+'/public', to: __dirname+'/dist' },
				//from 从， to 到 __dirname 当前目录
				{ from: __dirname+'/../src/static', to: __dirname+'/dist/static' },
			 ],
			}
		),
    ],
};

main.js

import ReactDom from 'react-dom'
import React,{Component} from 'react'
class App extends Component{
    constructor(props){
        super(props);
        this.state={num:1}
    }
    render(){
        return (<div>react <button onClick={
            ()=>{this.setState({num:++this.state.num})}
        }>{this.state.num}</button></div>)
    }
}
ReactDom.render(<App/>,document.getElementById("root")) 

webpack.config.js

{ 
test: /\.(js|jsx)$/, 
use:['babel-loader'],
exclude: /node_modules/ 
},

.bablerc

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
}

压缩

optimize-css-assets-webpack-plugin css优化压缩

const TerserPlugin = require(“terser-webpack-plugin”);

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

 minimizer: [ 
			 
			new optimizeCssAssetsWebpackPlugin({}),				
			new TerserPlugin()
			
			],	

代码分割

optimization: {
splitChunks: {
    chunks: "all", 
    // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
}, 

sourceMap

当错误了，能够知道源代码在那一行 sourceMap 他是一个map关系，他知道dist/main。就是文件96行错误，对应src目录下index.js第一行

devtool:'cheap-module-eval-source-map',
建议
// development:'cheap-module-eval-source-map'
// production:'cheap-module-source-map'

按需导入js

异步加载 js 需要安装 插件

cnpm install @babel/plugin-syntax-dynamic-import -D

配置 babelrc plugins

{
  "presets": ["@babel/preset-env","@babel/preset-react"],
  "plugins":["@babel/plugin-syntax-dynamic-import"]
 
}

在js使用

function getComponent(){
return import(/* webpackChunkName:"jquery" */'jquery').then(({default:$})=>{
   return $;
})
}
getComponent().then($=>{
    var el = $("<div>你好jquery</div>");
    $("body").append(el);
    el.click(()=>{
        alert("你好");
    })
    
})

Prefetch

Prefetch是告诉浏览器这是一个在未来可能使用到的资源。 浏览器通常会在空闲状态取得这些资源，在取得资源之后搁在HTTP缓存以便于实现将来的请求

 document.body.onclick=()=>getJq();
function getJq(){
import( /* webpackChunkName:"jquery", webpackPrefetch: true  */ 'jquery').then(({default:$})=>{
     
    $("div").click(()=>{
        alert("你好");
    })
})

}

Entry 与Output的配置

entry:{
main:'./src/index.js',
sub:'./src/index.js'
},
output:{
    publicPath:'http://www.js.com',
    // 配置根目录 默认是/ 可以配成相对目录./
    filename:'[name][hash].[ext ]'
    path:path.resolove(__dirname,'dist')
}

配置babel

{
 "presets": ["@babel/preset-env","@babel/preset-react"],
}

在根目录下的src目录中，新建一个 App.vue

在main.js中引用 App.vue 组件

// 引入 Vue 框架
import Vue from 'vue'

//引入 App.vue 组件
import App from './App.vue'

new Vue({
    el: '#app',
    render: h => h(App)
})

运行

npm run serve