Vue学习（第五天）

Vue学习（第五天）

一、webpack中使用less文件

1.1 安装

npm install --save-dev [email protected] [email protected]

1.2 在webpack.config.js中进行配置

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            // css-loader只负责将css文件进行加载
            //style-cloader负责将样式添加到DOM中
            //当有多个loader时，是从右向左
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            use:['style-loader','css-loader','less-loader']
        }]
    }
}

二、webpack中使用图片文件

2.1 安装

安装url-loader
npm install --save-dev [email protected]

安装file-loader
npm install --save-dev [email protected]

2.2 配置

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [{
                test: /\.css$/,
                // css-loader只负责将css文件进行加载
                //style-cloader负责将样式添加到DOM中
                //当有多个loader时，是从右向左
                use: ['style-loader', 'css-loader']
            }, {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 当加载的图片，小于limit时，会将图片编译成base64字符串格式
                        // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
                        limit: 8192,
                        name: 'img/[name].[hash:8].[ext]'
                    }
                }]
            }
        ]
    }
}

三、webpack中将ES6转为ES5

3.1 安装

npm install --save-dev [email protected] [email protected] [email protected]

3.2 配置

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [{
                test: /\.css$/,
                // css-loader只负责将css文件进行加载
                //style-cloader负责将样式添加到DOM中
                //当有多个loader时，是从右向左
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 当加载的图片，小于limit时，会将图片编译成base64字符串格式
                        // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
                        limit: 8192,
                        name: 'img/[name].[hash:8].[ext]'
                    }
                }]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options:{
                        presets:['es2015']
                    }
                }
            }
        ]
    }
}

四、webpack中使用vue的配置过程

4.1 安装

npm install [email protected] --save
npm install --save-dev [email protected] [email protected] //14版本后需要安装插件

4.2 配置

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [{
                test: /\.css$/,
                // css-loader只负责将css文件进行加载
                //style-cloader负责将样式添加到DOM中
                //当有多个loader时，是从右向左
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        // 当加载的图片，小于limit时，会将图片编译成base64字符串格式
                        // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
                        limit: 8192,
                        name: 'img/[name].[hash:8].[ext]'
                    }
                }]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options:{
                        presets:['es2015']
                    }
                }
            },{
                test:/\.vue$/, 
                use:['vue-loader']
            }
        ]
    },
    //在webpack.config.js配置文件中resolve中加入属性extensions:['.js','.css','.vue']以省略后缀名
    resolve:{
        alias:{// 别名
            'vue$':'vue/dist/vue.esm.js',
         }
    }
}

五、webpack中plugin的使用

5.1 版权

5.1.1 说明

自动生成版权信息等

5.1.2 安装

5.1.3 配置

	plugins: [
	        new webpack.BannerPlugin('最终版权归lele所有！')
	]

5.2 HtmlWebPackagePlugin

5.2.1 说明

• 自动生成一个index.html文件
• 将打包的js文件，自动通过script标签插入到body中

5.2.2 安装

npm install [email protected] --save-dev

5.2.3 使用

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
    ],

5.3 压缩代码

5.3.1 说明

代码优化

5.3.2 安装

npm install [email protected] --save-dev

5.3.3 配置

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');
new UglifyJsWebpackPlugin() //打包时

六、搭建本地服务器

1. 安装

npm install --save-dev [email protected]

2. 启动服务

webpack-dev-server

3. 在package.json中进行配置

"dev": "webpack-dev-server"

七、配置文件的分离

1.安装

npm install [email protected] --save-dev

2. 在package.json中进行配置

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },

3.dev.config.js中的配置

// 导入base.config.js
const baseConfig = require('./base.config.js');

const webpackMerge = require('webpack-merge');

module.exports = webpackMerge(baseConfig, {
    devServer: {
        contentBase: './dist',
        inline: true,
    }
})

八、脚手架的使用

1.安装

1.安装脚手架3
    npm install @vue/[email protected] -g
2.安装脚手架2的相关模板
    npm install @vue/cli-init -g

2.创建项目

脚手架2创建项目
    vue init webpack my-project
脚手架3创建项目
    vue create my-project