webpack(2)简单使用webpack.config.js配置文件进行打包（webpack怎么打包?为什么用?怎么配置?）

25-02-20 13

对于webpack(2)简单使用webpack.config.js配置文件进行打包感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍webpack怎么打包?为什么用?怎么配置?，并为您提供关于np

对于webpack(2)简单使用webpack.config.js配置文件进行打包感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍webpack怎么打包?为什么用?怎么配置?，并为您提供关于npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js、The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）、ts typescript 使用webpack命令及配置文件说明webpack.config.js配置说明、vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别的有用信息。

本文目录一览：

webpack(2)简单使用webpack.config.js配置文件进行打包（webpack怎么打包?为什么用?怎么配置?）
npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js
The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）
ts typescript 使用webpack命令及配置文件说明webpack.config.js配置说明
vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别

webpack(2)简单使用webpack.config.js配置文件进行打包（webpack怎么打包?为什么用?怎么配置?）

1.接上面（1）中的代码

2.在demo0目录下新建一个webpack.config.js文件，这个文件是webpack打包默认的配置文件，当然你也可以不叫这个名字，但是不是这个名字的话就需要在执行webpack命令的时候显示的告诉它你的配置文件的名字

3.webpack.config.js这个文件也是一个js文件，所以配置文件依然遵循js的语法

4.webpack.config.js文件：

const{resolve}=require('path');//引入nodejs中的path模块，使用它来获取当前目录
module.exports={//这里使用Commonjs的模块输出 entry:'./src/index.js',//设置项目的入口文件 output:{ path:resolve(__dirname,'build'),//设置输出文件的路径，__dirname的值就是这个配置文件所在的路径 filename:'build.js'//设置输出文件的名称 }, module:{//这里一般是配置让webpack如何去打包一些非js的资源，如css/图片文件等 rules:[] }, plugins:[//这里可以配置使用一些外部提供的插件来实现某些更加强大的功能 ], mode:'development'//设置打包的模式为开发环境 } 5.然后在demo0目录下执行：npx webpack即可，就生成build/build.js目标文件

npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js

    // fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
修改成
   fs.write(fd, buf, 0, 'utf-8', function (err, written, buffer) {})

修改完成之后在运行

npm run init

The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）

学习之路基于webpack3.10.0，webpack4.0之后更新。

一：开始前的配置

1、初始化项目，其实就是新建一个package.json文件，后面的命令依赖里面的配置项。

npm init

2、修改npm script定义的任务，新增一项。

"scripts": {
    "start": "webpack --config webpack.config.js"
}

3、安装webpack

npm i -D webpack@3.10.0

注：--save --dev 和 --save的区别？

答：--save --dev是开发环境需要的包，添加到devDependencies里面。

--save是生产环境需要的包，添加到dependencies里面。

二：使用webpack打包Js文件

1、页面入口文件 index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
　　<div id="app"></div>
　　<!--导入 Webpack 输出的 JavaScript 文件-->
　　<script src="./dist/bundle.js"></script>
</body>
</html>

2、JS 工具函数文件 show.js

// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
  window.document.getElementById(''app'').innerText = ''Hello,'' + content;
}

// 通过 CommonJS 规范导出 show 函数
module.exports = show;

3、JS 执行入口文件 main.js

// 通过 CommonJS 规范导入 show 函数
const show = require(''./show.js'');
// 执行 show 函数
show(''Webpack'');

4、Webpack 在执行构建时默认会从项目根目录下的 webpack.config.js 文件读取配置，所以你还需要新建它，其内容如下：

const path = require(''path'');

module.exports = {
  // JavaScript 执行入口文件
  entry: ''./main.js'',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: ''bundle.js'',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, ''./dist''),//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。

}
};

5、打包js文件

npm start

一切文件就绪，在项目根目录下执行 webpack 命令运行 Webpack 构建，你会发现目录下多出一个 dist目录，里面有个 bundle.js 文件， bundle.js 文件是一个可执行的 JavaScript 文件。

ts typescript 使用webpack命令及配置文件说明webpack.config.js配置说明

命令

安装配置文件 npm init

安装的依赖

npm i -D webpack webpack-cli typescript ts-loader

npm i -D html-webpack-plugin 自动生成html文件

npm i -D webpack-dev-server webpack内置服务器

npm i -D postcss postcss-loader postcss-preset-env 兼容低版本的CSS

并在package.json添加

"scripts" : {

"test" : "echo \" Error: no test specified \" && exit 1" ,

"build" : "webpack" ,

"start" : "webpack serve --open chrome.exe"

生成tsconfig.json文件

tsc --init

新建webpack.config.js

// const { request } = require("http")

// 引入一个包

const path = require ( ''path'' )

// 引入html插件

const htmlWebapckPlugin = require ( ''html-webpack-plugin'' )

const { CleanWebpackPlugin }= require ( ''clean-webpack-plugin'' )

// webpack中所有的配置信息卸载module.exports中

module . exports ={

// 指定入口文件

entry : "./src/index.ts" ,

// 指定打包文件所有在目录

output : {

// 指定打包文件的目录

path : path . resolve ( __dirname , ''dist'' ),

// 打包后的文件的文件

filename : "bundle.js" ,

// 告诉webpack不适用箭头函数

environment : {

arrowFunction : false

}

// webpack4.0对语法要求更加严格，要求我们在运行 webpack 时必须在 “开发或者生产” 中选择一种模式，没有设置webpack模式，就会产生报错。

mode : ''development'' , // 设置mode -mode development [开发环境] 或者 --mode production [生产环境]

// 用来设置引用模块

resolve : {

extensions : [ ".ts" , ".js" ] //TS JS结尾的 import {hi} from''./m1''

//指定webpack打包使用模块

module : {

// 指定要加载的规则

rules : [

{

// test 指定的规则生效的文件

// tsloader 处理ts结尾的文件

test : / \. ts $ / ,

use : [

// 配置babel

{

// 指定加载器

loader : "babel-loader" ,

// 设置babel

options : {

//设置预定义的环境

presets : [

[

// 指定环境

"@babel/preset-env" ,

// 配置信息

{

targets : {

"chrome" : "88" , //谷歌浏览器兼容的版本88

// "ie":"11"

// 指定corejs的版本

"corejs" : "3" ,

// 使用corejs的方式,"usage"表示按需加载

"useBuiltIns" : "usage"

}

]

}

"ts-loader" ,

// 排除的文件

exclude : /node_modules/

// 设置less 文件的处理

// loader 执行顺序是从下向上 less-lader csss-loader style-loader

{

test : / \. less $ / ,

use : [

"style-loader" ,

"css-loader" ,

// 引入postcss 兼容低版本的工具

{

loader : "postcss-loader" ,

options : {

postcssOptions : {

plugins : [

[

"postcss-preset-env" ,

{

browsers : "last 2 versions" //兼容的浏览器版本

}

]

}

"less-loader"

]

}

]

devServer : {

static : {

directory : path . join ( __dirname , "/" ),

}

// webpack插件

plugins : [

new CleanWebpackPlugin (),

new htmlWebapckPlugin ({

template : "./src/index.html"

}),

]

}

vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别

1.前言

这几天，都遇到过有人问过相似的问题，就是用vue和webpack搭建目录的时候，怎么把单页面应用的配置改成多文件应用，或者是怎么把多文件应用的配置改成单文件应用。这个情况，我之前有处理过，公司的同事教过我，我就针对这个情况写下此篇文章。各位如果觉得我哪里写得不够好，写错了，欢迎指出，大家一起进步。

2.说明

首先，我用的vue和webpack的版本都是2.x的，请大家留意自己使用的版本，特别是webpack的版本，1和2还是有些区别的。
然后，项目搭建的流程我不多说了，之前写过文章，网上也有很多好文章值得学习。接下来我只针对webpack.config.js这个配置文件说明，因为我做项目的时候，改动的基本就是这里，项目的文件虽然也有写法上的改动，但是那个改动相信不会难到大家，如果真的不知如何下手，我往后可能会再写文章。

3.单文件应用的配置

由于现在单文件应用写得比较多，一开始我就先放单文件应用的配置文件吧，代码如下

let path = require(''path'');
let webpack = require(''webpack'');
/*
 html-webpack-plugin插件，webpack中生成HTML的插件，
 具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
 */
let HtmlWebpackPlugin = require(''html-webpack-plugin'');
/*
 一个根据模式匹配获取文件列表的node模块。
 有关glob的详细用法可以在这里看到——https://github.com/isaacs/node-glob
 */
let glob = require(''glob'');
/*
 webpack插件
 */
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
let publicPath = ''/dist/'';
//IP地址
let serverHost = getIPAdress();
let config = {
    //入口文件
    entry: {
        index: path.resolve(__dirname, ''src/js/page/index.js''),
        vendors: [''vue'', ''vue-router'',''vue-resource'',''vuex'',''element-ui'',''element-ui/lib/theme-default/index.css''] // 需要进行单独打包的文件
    },
    //出口文件
    output: {
        path: path.join(__dirname, ''dist''), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
        publicPath: publicPath,                //模板、样式、脚本、图片等资源对应的server上的路径
        filename: ''js/[name].js'',            //每个页面对应的主js的生成配置
        // chunkFilename: ''js/[name].asyncChunk.js?[chunkhash]''   //chunk生成的配置
        chunkFilename: ''js/[name].asyncChunk.js?''+new Date().getTime() //chunk生成的配置
    },
    module: {
        //加载器
        rules: [
            {
                test: /\.vue$/,
                loader: ''vue-loader'',
                options: {
                    loaders: {
                        scss: ''vue-style-loader!css-loader!sass-loader'', // <style lang="scss">
                        sass: ''vue-style-loader!css-loader!sass-loader?indentedSyntax'' // <style lang="sass">
                    }
                }
            },
            {
                test: /\.html$/,
                loader: "raw-loader"
            },
            {
                test: /\.css$/,
                loader: ''style-loader!css-loader''
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["es2015","stage-0"],
                    plugins: [''syntax-dynamic-import'']
                }
            },
            {
                test: /\.scss$/,
                loader: ''style-loader!css-loader!sass-loader''
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: ''file-loader''
            },
            {
                //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
                //如下配置，将小于8192byte的图片转成base64码
                test: /\.(png|jpg|gif)$/,
                loader: ''url-loader?limit=8192&name=images/[hash].[ext]''
            }
        ]
    },
    //插件
    plugins: [
        //生成HTML文件
        new HtmlWebpackPlugin({
            filename: path.resolve(__dirname, ''dist/html/index.html''), //生成的html存放路径，相对于path
            template: path.resolve(__dirname, ''src/html/index.html''), //ejs模板路径,前面最好加上loader用于处理
            inject: ''body'',  //js插入的位置，true/''head''/''body''/false
            chunks: [''load'', ''vendors'', ''vendor1'', ''vendor2'', ''index''],
            hash: true
        }),
        //提取公共模块
        new CommonsChunkPlugin({
            name: ''vendors'', // 将公共模块提取，生成名为`vendors`的chunk
            //name: [''vendors'', ''vendor1'', ''vendor2'', ''load''], // 将公共模块提取，生成名为`vendors`的chunk
            minChunks: 2, //公共模块被使用的最小次数。配置为2，也就是同一个模块只有被2个以外的页面同时引用时才会被提取出来作为common chunks
            // children:true  //如果为true,那么公共组件的所有子依赖都将被选择进来
        }),
        //在async chunk 里面找到复用 >= 2次的模块再单独提取出来
        new CommonsChunkPlugin({
            async: ''lazy'',
            minChunks: (module, count) => ( //count 模块被复用的次数
                count >= 2
            )
        }),
        new UglifyJsPlugin({ //压缩代码
            compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true
            },
            except: [''$super'', ''$'', ''exports'', ''require'', ''define'', ''module''] //排除关键字
        })
    ],
    //使用webpack-dev-server
    devServer: {
        contentBase: path.join(__dirname, "/"),
        host: serverHost,
        port: 9090, //默认9090
        inline: true, //可以监控js变化
        hot: true//热启动
    },
    resolve: {
        alias: {
            vue: ''vue/dist/vue.js''
        },
        extensions:[''.js'',''.scss'',''.vue'',''.json'']// 可以不加后缀, 直接使用 import xx from ''xx'' 的语法
    }
};
module.exports = config;
/**
 * @description 获取本地IP地址
 * @returns {string|*}
 */
function getIPAdress() {
    let interfaces = require(''os'').networkInterfaces();
    for (let devName in interfaces) {
        let iface = interfaces[devName];
        for (let i = 0; i < iface.length; i++) {
            let alias = iface[i];
            if (alias.family === ''IPv4'' && alias.address !== ''127.0.0.1'' && !alias.internal) {
                return alias.address;
            }
        }
    }
}

4.多文件应用的配置

多文件现在用的不算很多，主要有时候会负责公司一些活动的小项目会用到，代码如下。

let path = require(''path'');
let webpack = require(''webpack'');
/*
 html-webpack-plugin插件，webpack中生成HTML的插件，
 具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
 */
let HtmlWebpackPlugin = require(''html-webpack-plugin'');
/*
 一个根据模式匹配获取文件列表的node模块。
 有关glob的详细用法可以在这里看到——https://github.com/isaacs/node-glob
 */
let glob = require(''glob'');
/*
 webpack插件
 */
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
let publicPath = ''/dist/'';
//通过getEntry函数获取所有js脚本
let jsEntries = getEntry(''./src/js/page/*.js'');
//IP地址
let IPAddress = getIPAdress();
let serverHost = IPAddress;
let config = {
    //入口文件
    entry: jsEntries,
    // entry: {
    //     index:jsEntries,
    //     vendors: [''vue'', ''vue-router'',''vue-resource''] // 需要进行单独打包的文件
    // },
    //出口文件
    output: {
        path: path.join(__dirname, ''dist''), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
        publicPath: publicPath,                //模板、样式、脚本、图片等资源对应的server上的路径
        filename: ''js/[name].js'',            //每个页面对应的主js的生成配置
        chunkFilename: ''js/[id].chunk.js?[chunkhash]''   //chunk生成的配置
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: ''vue-loader'',
                options: {
                    loaders: {
                        scss: ''vue-style-loader!css-loader!sass-loader'', // <style lang="scss">
                        sass: ''vue-style-loader!css-loader!sass-loader?indentedSyntax'' // <style lang="sass">
                    }
                }
            },
            {
                test: /\.html$/,
                loader: "raw-loader"
            },
            {
                test: /\.css$/,
                loader: ''style-loader!css-loader''
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["es2015","stage-0"],
                    plugins: [''syntax-dynamic-import'']
                }
            },
            {
                test: /\.scss$/,
                loader: ''style-loader!css-loader!sass-loader''
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: ''file-loader''
            },
            {
                //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
                //如下配置，将小于8192byte的图片转成base64码
                test: /\.(png|jpg|gif)$/,
                loader: ''url-loader?limit=8192&name=images/[hash].[ext]''
            }
        ]
    },
    plugins: [
        new CommonsChunkPlugin({
            name: ''vendors'', // 将公共模块提取，生成名为`vendors`的chunk
            //name: [''vendors'', ''vendor1'', ''vendor2'', ''load''], // 将公共模块提取，生成名为`vendors`的chunk
            minChunks: 2, //公共模块被使用的最小次数。配置为2，也就是同一个模块只有被2个以外的页面同时引用时才会被提取出来作为common chunks
            // children:true  //如果为true,那么公共组件的所有子依赖都将被选择进来
        })
        new UglifyJsPlugin({ //压缩代码
            compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true
            },
            except: [''$super'', ''$'', ''exports'', ''require'', ''define'', ''module''] //排除关键字
        })
    ],
    //使用webpack-dev-server
    devServer: {
        contentBase: path.join(__dirname, "/"),
        host: serverHost,
        port: 9090, //默认9090
        inline: true, //可以监控js变化
        hot: true//热启动
    },
    resolve: {
        alias: {
            vue: ''vue/dist/vue.js''
        },
        extensions:[''.js'',''.scss'',''.vue'',''.json'']// 可以不加后缀, 直接使用 import xx from ''xx'' 的语法
    }
};
//获取目录下的所有.html文件的名称
let tplPages = Object.keys(getEntry(''./src/html/*.html''));
tplPages.forEach((pathname)=> {
    let conf = {
        filename: path.resolve(__dirname, ''dist/html/''+ pathname +''.html''), //生成的html存放路径，相对于path
        template: path.resolve(__dirname, ''src/html/''+ pathname +''.html''), //ejs模板路径,前面最好加上loader用于处理
        inject: ''body'',  //js插入的位置，true/''head''/''body''/false
        chunks: [''load'', ''vendors'', ''vendor1'', ''vendor2'', ''index''],
        hash: true
    };
//如果文件名和入口文件名所对应的js有匹配(如：index.html和index.js就是相匹配的,就往index.html里面插入index.js；share.html和share.js就是相匹配的,就往share.html里面插入share.js)
    if (pathname in config.entry) {
        conf.inject = ''body'';
        conf.chunks = [''vendors'', pathname];
        conf.hash = true;
    }
//生成配置压栈
    config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;

/**
 * @description 获取本地IP地址
 * @returns {string|*}
 */
function getIPAdress() {
    let interfaces = require(''os'').networkInterfaces();
    for (let devName in interfaces) {
        let iface = interfaces[devName];
        for (let i = 0; i < iface.length; i++) {
            let alias = iface[i];
            if (alias.family === ''IPv4'' && alias.address !== ''127.0.0.1'' && !alias.internal) {
                return alias.address;
            }
        }
    }
}
function getEntry(globPath) {
    //获取globPath路径下的所有文件
    let files = glob.sync(globPath);
    let entries = {},
        entry, dirname, basename, pathname, extname;
    //循环
    for (let i = 0; i < files.length; i++) {
        entry = files[i];
        dirname = path.dirname(entry);//返回路径的所在的文件夹名称
        extname = path.extname(entry);//返回指定文件名的扩展名称
        /**
         * path.basename(p, [ext])
         * 返回指定的文件名，返回结果可排除[ext]后缀字符串
         * path.basename(''/foo/bar/baz/asdf/quux.html'', ''.html'')=>quux
         */
        basename = path.basename(entry, extname);
        pathname = path.join(dirname, basename);//路径合并
        entries[basename] = entry;
    }
    //返回map=>{fileName:fileUrl}
    return entries;
}

5.区别总结

一对比，区别就是出来了，但是写法是大同小异的。有区别是主要是下面几点

1.入口文件的区别，单页面应用入口文件是就是一个index.js（''src/js/page/index.js''）。而多页面应用的入口文件是所有需要用到的页面let jsEntries = getEntry(''./src/js/page/*.js'');。（getEntry方法是返回一个目录下所有的.js文件的名称和路径，jsEntries就是一个对象数组，里面包含着./src/js/page目录下所有的.js文件的名称和路径）

2.在多文件应用的配置中，HtmlWebpackPlugin这个插件是提取出来，在遍历getEntry(''./src/html/*.html'')的过程中，执行一次就往配置(config.plugins)那里push一次（config.plugins.push(new HtmlWebpackPlugin(conf))）。为什么这样写，大家应该很清楚了，有多少个入口文件，就得写多少次这个插件，new HtmlWebpackPlugin多少次，如果入口文件只有一两个，两三个还好，如果有100个入口文件，岂不是要在config.plugins那里写100次new HtmlWebpackPlugin，所以就标题文字遍历了，方便点。

结语

好了。单文件应用和多文件应用上，webpack.config.js是大同小异的，区别就讨论到这里了。如果文章觉得那里写得不好或者写错了，欢迎指出。同时也希望，这篇文章能帮到大家！

今天的关于webpack(2)简单使用webpack.config.js配置文件进行打包和webpack怎么打包?为什么用?怎么配置?的分享已经结束，谢谢您的关注，如果想了解更多关于npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js、The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）、ts typescript 使用webpack命令及配置文件说明webpack.config.js配置说明、vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别的相关知识，请在本站进行查询。

本文标签：