vue中webpack基础配置

 

webpack集成vue版本

1.使用到的包：

// 用到的包下载命令：
// npm install --save-dev style-loader css-loader    //加载css
// npm install --save-dev less less-loader           //加载less
// npm install sass-loader node-sass webpack --save-dev     //加载scss
// npm install --save-dev file-loader                //加载文件（图片）
// npm install extract-text-webpack-plugin@next --save-dev   提取css
// npm install --save-dev html-webpack-plugin        //生成html模板
// npm install --save-dev clean-webpack-plugin       //打包前清除dist包
// npm install --save-dev webpack-dev-server         //安装webpack开发服务器
// npm install --save-dev webpack-merge              //合并webpack配置
// npm install -D vue-loader vue-template-compiler vue-style-loader   //安装 vue-loader


// npm install vue --save-dev                         //vue使用webpack时的依赖
// npm install vue-router --save                      //vue使用路由

  2.webpack.base.js:

// 引入node核心包
const path = require("path");

// 引入插件（提取css/生成html模板/清除dist包）
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入 vue 专用插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {
    // 文件入口
    entry:'./src/index.js',

    // 打包输出
    output:{
        filename:'bundle.js',// 默认打包后的文件名 bundle.js
        // 注意此处输出目录是父级文件夹
        path:path.resolve(__dirname,'../dist')// 默认打包后的文件目录 dist
    },


    // 配置对路径解析快捷方式
    resolve:{
        // 提供别名(快捷方式)，方便查找模块的路径
        // 避免长串的 ../../../的组合
        // alias 快捷方式 key:value 的形式声明 快捷方式和对应的目录
        alias:{
            '@':path.resolve(__dirname, "../src")
        },
        // extensions 指后缀数组, 当你引入一个文件, 又没有写后缀的时候,
        // webpack 会自动尝试在这个配置中找到存在的文件
        // 忽略扩展名, 希望在写代码的时候可以省略某些常用扩展名
        extensions: [".js",".vue"]
    },


    // 模块加载器
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader: 'vue-loader'
            },
            {
                // test 指定匹配的文件名, 使用正则表达式
                test: /\.css$/,// 匹配css扩展名文件
                // use 指定这类型文件应该调用的加载器
                use: ExtractTextPlugin.extract({// 提取css
                    fallback: 'vue-style-loader',
                    use: ['css-loader']
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({//提取less
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
            {
                test: /\.(png|svg|jpg|gif)$/,// 匹配图片文件
                use: [
                    {
                        loader: "file-loader", 
                        options: {
                            publicPath: "./images/", // 引入图片时会在路径前面加上该选项
                            outputPath: "images" //  输出到dist下的images目录
                        }
                    }
                ]
            }
        ]
    },

    // 插件
    plugins: [
        // 提取css样式到单独文件
        new ExtractTextPlugin("style/style.css"),
		
        // 自动生成index.html到dist
        new HtmlWebpackPlugin({
            template: "public/index.html"
        }),
        new VueLoaderPlugin()
    ]
}

3.webpack.dev.js

通过merge将webpack.base.js（基础配置）与开发配置或生产配置合并

const merge = require('webpack-merge');
const base = require('./webpack.base.js');
const { stats } = require('./webpack.prod.js');

module.exports = merge(base, {
    mode: "development",
    
    // 生成map映射文件 帮助开发时能具体的定位到异常代码行
    devtool: "source-map",
	
    // 开发服务器配置
    devServer: {
        port: 8000, // 默认端口是8080,
        stats:'errors-only' //开发服务器只打印错误
   },
})

  stats的选项：

Preset	Alternative	Description
errors-only	none	只在产生error时打印日志
minimal	none	只打印errors或文件第一次被编译时
none	false	禁止打印日志
normal	true	标准打印日志
verbose	none	打印所有日志

4.webpack.prod.js

const merge = require('webpack-merge');
const base = require('./webpack.base.js');

// 引入打包前清除dist包插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = merge(base, {
    mode: "production",
    plugins:[
        // 每次构建前清除dist目录
        new CleanWebpackPlugin(),
    ]
})

5.打包命令配置（package.json中配置）

"scripts": {
    "test": "webpack -v",
    "dev": "webpack-dev-server --config ./config/webpack.dev.js --open",
    "build": "webpack --config ./config/webpack.prod.js"
  },

 

 webpack相关配置了解

  1.安装webpack  

  当得到版本意味着安装成功

//1.初始化项目
npm init

//2.在项目目录下安装webpack（不推荐全局安装）
npm install --save-dev webpack webpack-cli

//3.在生成的配置文件package.js中配置scripts
//非全局安装不可直接在终端使用webpack -v命令，不起作用
//通过执行npm run test来获取webpack的版本
"scripts": {
    "test": "webpack -v"
}

  注意：

• --save / -S 作为生产环境依赖 会被记录到 package.json 的 dependencies 里面

• --save-dev / -D 作为开发环境依赖 记录到 package.json 的 devDependencies 里面

• -g 全局安装 装到计算机系统路径里面

 

webpack简单使用

 1.配置webpack.config.js文件（项目根目录）  

const path = require('path');

module.exports = {
    entry: './index.js',					// 项目入口
    output: {
        filename: 'bundle.js',                  // 默认打包后的文件名 bundle.js
        path: path.resolve(__dirname, 'dist')   // 默认打包后的文件目录 dist
    }
};

 2.配置打包脚本（package.json中配置）

  可以通过npm run build进行打包

"scripts": {
    "test": "webpack -v",
    "build": "webpack --config webpack.config.js"
}

 3.模块加载器（当项目中有css,less等样式文件，图片等文件时）

 3.1.webpack加载css

 需要安装style-loader和css-loader两个依赖

npm install --save-dev style-loader css-loader

webpack.config.js中加入css模块

 用于匹配项目中的css文件

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',                            
      path: path.resolve(__dirname, 'dist')    
    },
	
    // 模块加载器配置项
    module: {
        rules: [
            {
                test: /\.css$/,			// 匹配css扩展名文件
                use:[					// 配置loader加载器
                    'style-loader',		// 把css代码写入到网页中
                    'css-loader'		// 读取css的代码
                ]	
            }
        ]
    }
};

 3.2.webpack加载less

 安装依赖

npm install --save-dev less less-loader

webpack.config.js加入less模块

const path = require('path');

module.exports = {
    // 其他配置...
	
    // 模块加载器配置项
    module: {
        rules: [
            // 这里上面有其他配置, 比如 css 之类...
            // 添加一个新的, 负责 less 文件
            {
                test: /\.less$/,		// 匹配less扩展名文件
                use:[				
                    'style-loader',		// 把less代码写入到网页中
                    'css-loader',		// 读取less的代码
                    'less-loader'		// 解释编译less代码
                ]	
            },
        ]
    }
};

 3.3webpack加载scss

安装依赖

npm install sass-loader node-sass webpack --save-dev

webpack.config.js加入sass模块

 注意：scss文件使用sass来解释编译

module: {
    rules: [{
      test: /\.scss$/,
      use:[				
          'style-loader',	// 把scss代码写入到网页中
          'css-loader',		// 读取scss的代码
          'sass-loader'		// 解释编译scss代码
      ]	
    }]
  }

  3.4加载图片

 安装依赖

npm install --save-dev file-loader

webpack.config.js中加入文件模块

module.exports = {
    // 其他配置...
	
    // 模块加载器配置项
    module: {
        rules: [
            // 其他配置...
			{
                test: /\.(png|svg|jpg|gif)$/,	// 匹配图片文件
                use: [
                    {
                        loader: "file-loader",              // 处理图片文件返回链接
                        options: {
                            publicPath: "./images/",   		// 引入图片时会在路径前面加上该选项
                            outputPath: "images"            //  输出到dist下的images目录
                        }
                    } 
                ]
            }
        ]
    }
};

 此时webpack文件：

 这是最原始的webpack文件，这里的css文件都打包到一个js文件中(bundle.js)，还没有用到插件

const path = require('path');

module.exports = {
    entry:'./index.js',// 项目入口
    output:{
        filename:'bundle.js',// 默认打包后的文件名 bundle.js
        path:path.resolve(__dirname,'dist')// 默认打包后的文件目录 dist
    },
    // 遇到问题主要表现为打包过程中遇到的问题
    module:{
        rules:[
            {
                test:/\.css$/,// 匹配css扩展名文件
                // use中，从低往上配置，基本先插入网页，在解释或读取
                use:[// 配置loader加载器
                    'style-loader',// 把css代码写入到网页中
                    'css-loader'// 读取css的代码
                ]
            },
            {
                test: /\.less$/,// 匹配less扩展名文件,
                use:[
                    'style-loader',// 把less代码写入到网页中
                    'css-loader',// 读取less的代码
                    'less-loader'// 解释编译less代码
                ]
            },
            {
                test:/\.scss$/,
                use:[
                    'style-loader',// 把scss代码写入到网页中
                    'css-loader',// 读取scss的代码
                    'sass-loader'// 解释编译scss代码
                ]
            },
            {
                test:/\.(png|svg|jpg|gif)$/,	// 匹配图片文件
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            publicPath:'./images/',// 引入图片时会在路径前面加上该选项
                            outputPath:'images'//  输出到dist下的images目录
                        }
                    }
                ]
            }
        ]
    }
}

 

以下是插件版本

webpack插件

使用插件来拆分出单独的css文件以及优化打包过程

1.提取css插件

 安装依赖包

npm install extract-text-webpack-plugin@next --save-dev

webpack.config.js中加入插件，并把原来的css加载器去除，重写配置

注释的为去除的代码，改为使用插件的配置写法

const path = require('path');
//  导入提取样式的webpack插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: './src/index.js',					// 项目入口
    output: {
        filename: 'bundle.js',                  // 默认打包后的文件名 bundle.js
        path: path.resolve(__dirname, 'dist')   // 默认打包后的文件目录 dist
    },

    // 模块加载器配置项
    module: {
        rules: [
            // {
            //     test: /\.css$/,			// 匹配css扩展名文件
            //     use: [					// 配置loader加载器
            //         'style-loader',		// 把css代码写入到网页中
            //         'css-loader'		// 读取css的代码
            //     ]
            // },
            // {
            //     test: /\.less$/,		// 匹配less扩展名文件
            //     use: [
            //         'style-loader',		// 把less代码写入到网页中
            //         'css-loader',		// 读取less的代码
            //         'less-loader'		// 解释编译less代码
            //     ]
            // },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({	// 提取css
                    fallback: "style-loader",
                    use: ["css-loader"]
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({	// 提取less
                    fallback: "style-loader",
                    use: ["css-loader", "less-loader"]
                })
            },
        ]
    },
    // 使用插件配置
    plugins: [
        new ExtractTextPlugin('style/style.css') // 提取到dist的style文件夹中
    ]
};

  2.自动生成html插件

 安装依赖

npm install --save-dev html-webpack-plugin

webpack中进行配置

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

module.exports = {
   	// 其他配置
    
    plugins: [
        new ExtractTextPlugin("style/style.css"),
        // + 新增配置
        new HtmlWebpackPlugin({
            template: "public/index.html"	// template指定默认html模板
        })
    ]
};

3.打包清理旧文件夹

安装依赖

npm install --save-dev clean-webpack-plugin 

webpack.config.js中配置

// 导入清除插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // 其他配置

    plugins: [
        new ExtractTextPlugin("style/style.css"),
		
        // 调用清除打包目录插件
        new CleanWebpackPlugin(),
        
        new HtmlWebpackPlugin({
            template: "public/index.html"
        }),
        
    ]
};

 

 

webpack开发服务器

注意：devServer不读取项目中的dist目录，而是读取服务器内存中的文件，我们不需要知道具体的存放地址，只需要知道两者输出的内容是一样的。

安装依赖

npm install --save-dev webpack-dev-server

webpack.config.js中进行配置

module.exports = {
    // 其他配置
    
    devtool: "source-map", 
	
    // + 开发服务配置
    devServer: {
         port: 8080 // 默认端口是8080
    },

    // 模块加载器配置项
    module: {
        // 其他配置
    }
    
    // 其他配置
}

package.json中重新配置

"scripts": {
    	"build": "webpack --config webpack.config.js",
    	"dev": "webpack-dev-server --config webpack.config.js --open"
 },

  注意：--open 表示自动打开浏览器，该配置默认值是false

 通过npm run dev可打包运行

 webpack.config.js插件版：

const path = require('path');

// 导入提取样式的webpack插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 自动生成html模板插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
//清除dist包插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry:'./index.js',// 项目入口
    output:{
        filename:'bundle.js',// 默认打包后的文件名 bundle.js
        path:path.resolve(__dirname,'dist')// 默认打包后的文件目录 dist
    },
    devtool:'source-map',// + 生成映射源代码文件
    // 遇到问题主要表现为打包过程中遇到的问题
    module:{
        rules:[
            {
                test:/\.css$/,// 匹配css扩展名文件
                // use中，从低往上配置，基本先插入网页，在解释或读取
                use:ExtractTextPlugin.extract({// 提取css
                    fallback: "style-loader",
                    use:["css-loader"]
                })
            },
            {
                test: /\.less$/,// 匹配less扩展名文件,
                use:ExtractTextPlugin.extract({// 提取less
                    fallback: "style-loader",
                    use:["css-loader","less-loader"]
                })
            },
            {
                test:/\.scss$/,
                use:ExtractTextPlugin.extract({// 提取scss
                    fallback: "style-loader",
                    use:["css-loader","sass-loader"]
                })
            },
            {
                test:/\.(png|svg|jpg|gif)$/,	// 匹配图片文件
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            publicPath:'./images/',// 引入图片时会在路径前面加上该选项
                            outputPath:'images'//  输出到dist下的images目录
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new ExtractTextPlugin('style/style.css'),// 提取到dist的style文件夹中
        // 调用清除打包目录插件
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'public/index.html'// template指定默认html模板
        })
    ]
}

 

vue在webpack中的优化配置

安装和配置vue-loader 

npm install -D vue-loader vue-template-compiler vue-style-loader

在webpack.config.js配置

// 1. webpack.config.js vue的加载器必须配置这个插件使用
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    module: {
        rules: [
            // ... 其它规则
            {	// 2. 
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {   // 3. vue-style-loader
                test: /\.css$/, 
                use: ExtractTextPlugin.extract({	// 提取css
                    fallback: "vue-style-loader",
                    use: ["css-loader"]
                })
            },
        ]
    },
    plugins: [
        // 4.  请确保引入这个插件！
        new VueLoaderPlugin()
    ]
}

 src目录别名和忽略拓展名

 // 模块解释
    resolve: {
        // 提供别名(快捷方式)，方便查找模块的路径
        // 避免长串的 ../../../的组合
        alias: {
            '@': path.resolve(__dirname, "../src")
        },

        // 忽略扩展名, 希望在写代码的时候可以省略某些常用扩展名
        extensions: [".js", ".json", ".vue"]
    },

 vue版本第一节已经给到