前端学习

Vue-webpack-loader（三）

2020-04-26  本文已影响0人  小二哥很二
一、我们的项目不仅有js文件，还有很多其它依赖，例如css，less等，那么如何在打包的时候将css文件一起打包呢？

这里就需要一个合适对应的loader，否则就会报错，以下安装都是开发时依赖：

ERROR in ./src/css/normal.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See htt
ps://webpack.js.org/concepts#loaders
> body {
|     background-color: red;
| }
 @ ./src/main.js 10:0-27
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! meetwebpack@1.0.0 dev: `webpack --mode=development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the meetwebpack@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\nodejs\node_cache\_logs\2020-04-26T01_55_34_099Z-debug.log

1、安装css-loader：

npm install --save-dev css-loader

2、配置webpack.config.js文件

module.exports = {
    //entry指定入口文件,可以添加多个入口，然后生成多个出口
    entry:{
        home:path.resolve(__dirname,'./src/main.js')
    },
    //output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
    output:{
        //node语法，__dirname获取当前文件的路径
        path:path.resolve(__dirname,'dist'),
        //这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
        filename:'[name].js'
    },
    module:{
        rules: [
            {
                test: /\.css$/,
                //use数组里也可以写成对象的形成[{ loader: "style-loader" },{ loader: "css-loader" }]
                //webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

3、安装style-loader
如果只安装了css-loader，css文件是不会渲染到html文件里，它只负责css文件的解析加载，所以还需要一个style-loader

npm install style-loader --save-dev

4、执行打包命令
npm run dev就可以了

二、上面说了除了css，还有less，less是css的扩展，使样式代码更简洁

1、安装less-loader
npm install --save-dev less-loader less
2、配置webpack.config.js文件

module:{
        rules: [
            {   //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
                test: /\.css$/,
                //webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
                }, {
                    loader: "css-loader" // translates CSS into CommonJS，解析css
                }, {
                    loader: "less-loader" // compiles Less to CSS，加载less编译成css
                }]
            }
        ]
    }
}

3、执行打包命令
npm run dev

三、url-loader：像 file loader 一样工作，但如果文件小于限制，可以返回 data URL

1、安装
npm install --save-dev url-loader
2、配置webpack.config.js文件

const path = require('path')
module.exports = {
    //entry指定入口文件,可以添加多个入口，然后生成多个出口
    entry:{
        home:path.resolve(__dirname,'./src/main.js')
    },
    //output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
    output:{
        //node语法，__dirname获取当前文件的路径
        path:path.resolve(__dirname,'dist'),
        //这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
        filename:'[name].js'
    },
    module:{
        rules: [
            {   //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
                test: /\.css$/,
                //webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
                }, {
                    loader: "css-loader" // translates CSS into CommonJS，解析css
                }, {
                    loader: "less-loader" // compiles Less to CSS，加载less编译成css
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,   //图片过滤
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit时候，会将图片编译成base64字符串形式
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }
}

3、file-loader
当上传图片小于limit，就会用url-loader，而大于的时候就会自动用file-loader。file-loader不用配置，直接安装即可：
但是打包后，图片会生成一个哈希值命名的图片在dist目录下，而html读取的路径与其不一致，所以要在output里加一个publicpath=‘dist/

output:{
        //node语法，__dirname获取当前文件的路径
        path:path.resolve(__dirname,'dist'),
        //这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
        filename:'[name].js',
        //当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
        publicPath:'dist/'
    }
publicPath
四、模块化思想，webpack配置VUE

1、安装VUE
npm install vue --save
2、引用vue：main.js

//src目录里面放源码
//dist目录里面放打包好的东西，供发布用
import {add,mul,sub} from "./js/mathUtils";

console.log(add(10, 20));
console.log(mul(2, 2));
console.log(sub(3, 2));

//1..依赖css文件，这里用commonjs写法，不用在前面加变量，因为只是单纯依赖css
require('./css/normal.css')

//2..依赖less文件，less是css的扩展
require('./css/special.less')
document.writeln('<h2>你好，我是less样式~</h2>')

//3..使用vue进行开发，要先安装vue依赖：npm install vue --save
//这么引用打包，控制太报错，vue两类版本：runtime-only和runtime-compiler
//runtime-only：代码中，不可以有任何的template，会把vue实例div当作template
//runtime-compiler：代码中，可以有template，因为有compiler用于编译
import Vue from 'vue'
const app = new Vue({
    el:"#app",
    data:{
        message:"hello webpack-vue"
    }
})

注意：这种方式直接打包，控制台会报如下错误：

vue报错

3、修改VUE编译版本

vue两类版本：
runtime-only：代码中，不可以有任何的template，会把vue实例div当作template
runtime-compiler：代码中，可以有template，因为有compiler用于编译

webpack.config.js文件中添加resolve字段：

const path = require('path')
module.exports = {
    //entry指定入口文件,可以添加多个入口，然后生成多个出口
    entry:{
        home:path.resolve(__dirname,'./src/main.js')
    },
    //output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
    output:{
        //node语法，__dirname获取当前文件的路径
        path:path.resolve(__dirname,'dist'),
        //这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
        filename:'[name].js',
        //当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
        publicPath:'dist/'
    },
    module:{
        rules: [
            {   //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
                test: /\.css$/,
                //webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
                }, {
                    loader: "css-loader" // translates CSS into CommonJS，解析css
                }, {
                    loader: "less-loader" // compiles Less to CSS，加载less编译成css
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,   //图片过滤
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit时候，会将图片编译成base64字符串形式
                            //当加载的图片大于limit时候，要用file-loader加载,但是要更改路径
                            limit: 8192,
                            //这里的【name】是指打包之前图片的名字,hash为哈希值，ext为扩展名，都为变量，固定写法
                            name:'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    //添加resolve字段，指定vue编译版本为runtime-compiler
    resolve:{
        //alias别名
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    }
五、vue-loader使用

1、安装vue-loader
cnpm install vue-loader vue-template-compiler --save-dev
2、配置webpack.config.js
由于vue-loader14以后就需要插件支撑，所以要在webpack.config.js文件里导入插件

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    //entry指定入口文件,可以添加多个入口，然后生成多个出口
    entry:{
        home:path.resolve(__dirname,'./src/main.js')
    },
    //output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
    output:{
        //node语法，__dirname获取当前文件的路径
        path:path.resolve(__dirname,'dist'),
        //这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
        filename:'[name].js',
        //当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
        publicPath:'dist/'
    },
    module:{
        rules: [
            {   //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
                test: /\.css$/,
                //webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
                }, {
                    loader: "css-loader" // translates CSS into CommonJS，解析css
                }, {
                    loader: "less-loader" // compiles Less to CSS，加载less编译成css
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,   //图片过滤
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit时候，会将图片编译成base64字符串形式
                            //当加载的图片大于limit时候，要用file-loader加载,但是要更改路径
                            limit: 8192,
                            //这里的【name】是指打包之前图片的名字,hash为哈希值，ext为扩展名，都为变量，固定写法
                            name:'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {   //大概从14开始，就需要插件来支持使用vue-loader，如果不安装，就改下package.json里的vue-loader版本，然后npm install
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    //此插件就是支撑vue-loader使用的
    plugins: [
        new VueLoaderPlugin()
    ],
    //添加resolve字段，指定vue编译版本为runtime-compiler
    resolve:{
        //alias别名
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        },
        //指定哪些文件的后缀名省略
        extensions: ['.js','.css','.vue']
    }
}

3、抽离组件和js
main.js

import {add,mul,sub} from "./js/mathUtils";

console.log(add(10, 20));
console.log(mul(2, 2));
console.log(sub(3, 2));

//1..依赖css文件，这里用commonjs写法，不用在前面加变量，因为只是单纯依赖css
require('./css/normal.css');

//2..依赖less文件，less是css的扩展
require('./css/special.less');
document.writeln('<h2>你好，我是less样式~</h2>');

//3..使用vue进行开发，要先安装vue依赖：npm install vue --save
//这么引用打包，控制太报错，vue两类版本：runtime-only和runtime-compiler
//runtime-only：代码中，不可以有任何的template，会把vue实例div当作template
//runtime-compiler：代码中，可以有template，因为有compiler用于编译

import Vue from 'vue'
import App from './vue/App.vue'
new Vue({
    el:"#app",
    template:'<App/>',
    components:{
        App
    }
})

App.vue

<template>
    <div>
        <h2 class="test">{{message}}</h2>
        <button @click="btnClick">点击我</button>
        <!--        子组件cpn的调用-->
        <Cpn/>
    </div>
</template>

<script>
    import Cpn from './Cpn'
    export default {
        name: "App",
        //注册该子组件的子组件
        components:{
            Cpn
        },
        data(){
            return {
                message:'Hello vue实例中的template'
            }
        },
        methods:{
            btnClick() {
                console.log('我是vue实例子组件的button')
            }
        }
    }
</script>

<style scoped>
    .test{
        color: #D94A38;
    }
</style>

项目结构：

项目结构
六、插件

1、html-webpack-plugin插件，将html文件和dist一起打包
a）安装：cnpm install html-webpack-plugin --save-dev
b）配置webpack.config.js文件：
首先导入插件：const HtmlWebpackPlugin = require('html-webpack-plugin');
然后配置module.export里的plugins：new HtmlWebpackPlugin()

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack  = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //entry指定入口文件,可以添加多个入口，然后生成多个出口
    entry:{
        home:path.resolve(__dirname,'./src/main.js')
    },
    //output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
    output:{
        //node语法，__dirname获取当前文件的路径
        path:path.resolve(__dirname,'dist'),
        //这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
        filename:'[name].js'
        //当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
        //publicPath:'dist/'
    },
    module:{
        rules: [
            {   //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
                test: /\.css$/,
                //webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
                }, {
                    loader: "css-loader" // translates CSS into CommonJS，解析css
                }, {
                    loader: "less-loader" // compiles Less to CSS，加载less编译成css
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,   //图片过滤
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit时候，会将图片编译成base64字符串形式
                            //当加载的图片大于limit时候，要用file-loader加载,但是要更改路径
                            limit: 8192,
                            //这里的【name】是指打包之前图片的名字,hash为哈希值，ext为扩展名，都为变量，固定写法
                            name:'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {   //大概从14开始，就需要插件来支持使用vue-loader，如果不安装，就改下package.json里的vue-loader版本，然后npm install
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    //此插件就是支撑vue-loader使用的
    plugins: [
        new VueLoaderPlugin(),
        new webpack.BannerPlugin('最终版权归小二哥所有'),
        //根据index.html生成dist里的index.html
        new HtmlWebpackPlugin({
            template:`index.html`
        })
    ],
    //添加resolve字段，指定vue编译版本为runtime-compiler
    resolve:{
        //alias别名
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        },
        //指定哪些文件的后缀名省略
        extensions: ['.js','.css','.vue']
    }
}

2、js压缩插件：uglifyjs-webpack-plugin
a）安装：cnpm install uglifyjs-webpack-plugin --save-dev
b）导入和配置webpack.config.js文件:

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack  = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
    //entry指定入口文件,可以添加多个入口，然后生成多个出口
    entry:{
        home:path.resolve(__dirname,'./src/main.js')
    },
    //output指定出口文件，path必须是绝对路径,要先导入一个path,依赖与node
    output:{
        //node语法，__dirname获取当前文件的路径
        path:path.resolve(__dirname,'dist'),
        //这里的name是entry里的key，即home，这么写是方便生成多个出口时候的区分
        filename:'[name].js'
        //当用file-loader加载时，由于打包后图片在dist里，html读取的路径不一样，所以加一个publicpath
        // publicPath:'dist/'
    },
    module:{
        rules: [
            {   //css-loader只负责将css文件解析加载，不负责渲染到html里，所以还需要一个sytle-loader
                test: /\.css$/,
                //webpack读取多个loader时，是从右往左读的，所以此loader顺序不能改变
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings，渲染到DOM
                }, {
                    loader: "css-loader" // translates CSS into CommonJS，解析css
                }, {
                    loader: "less-loader" // compiles Less to CSS，加载less编译成css
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,   //图片过滤
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit时候，会将图片编译成base64字符串形式
                            //当加载的图片大于limit时候，要用file-loader加载,但是要更改路径
                            limit: 8192,
                            //这里的【name】是指打包之前图片的名字,hash为哈希值，ext为扩展名，都为变量，固定写法
                            name:'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {   //大概从14开始，就需要插件来支持使用vue-loader，如果不安装，就改下package.json里的vue-loader版本，然后npm install
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    //此插件就是支撑vue-loader使用的
    plugins: [
        new VueLoaderPlugin(),
        new webpack.BannerPlugin('最终版权归小二哥所有'),
        //根据index.html生成dist里的index.html
        new HtmlWebpackPlugin({
            template:`index.html`
        }),
        new UglifyjsWebpackPlugin()
    ],
    //添加resolve字段，指定vue编译版本为runtime-compiler
    resolve:{
        //alias别名
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        },
        //指定哪些文件的后缀名省略
        extensions: ['.js','.css','.vue']
    }
}

c）这时候打包后的home.js是这样的：

压缩后的home.js
上一篇下一篇

猜你喜欢

热点阅读