webpack4搭建前端开发项目

2024-02-16 09:53:40

目录

npm初始化项目

npm init
webpack4搭建前端开发项目

  • 新建文件 webpack.config.js

  • 新建文件夹 src， src/page，src/images，src/util，src/view

webpack4搭建前端开发项目

命令行中，在项目的根目录下 test-front，执行命令，安装开发环境

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

查看项目根目录下的 package.json文件

{
  "name": "test-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "meiken",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

正常的文件结构和效果

webpack4搭建前端开发项目

webpack4搭建前端开发项目

在一个login.html文件中引入了一个 js文件和一个css文件，就产生了效果了，既然就这么就能开发，为什么还要使用webpack进行打包呢？目前理解不是很深，只能边使用边体会。

JS打包

编辑 webpack.config.js 文件添加


var config = {
    entry:{
        'login' :  [__dirname + '/src/page/login/index.js'],
    },
    output:{
        path: __dirname +'/dist',
        filename: 'js/[name].js'
    },
};


module.exports = config;

根目录下，命令行中执行 webpack 打包命令：

webpack4搭建前端开发项目

src/page/login/login.js 被打包进了 dist/js/login.js中，很明显没有 html 也没有css

Html模版打包

命令行中执行命令：npm install html-webpack-plugin --save-dev

编辑 webpack.config.js


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


//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
    return {
        template : __dirname + '/src/view/' + name + '.html',
        filename : 'view/' + name + '.html',
        inject : true,
        hash : true,
        chunks : ['common',name]
    };
};


var config = {
    entry:{
        'login' :  [__dirname + '/src/page/login/index.js'],
        'logout' :  [__dirname + '/src/page/logout/index.js'],
    },
    output:{
        path: __dirname +'/dist',
        filename: 'js/[name].js'
    },
    plugins:[
       new HtmlWebpackPlugin(getHtmlConfig('login')),
       new HtmlWebpackPlugin(getHtmlConfig('logout')),
    ]
};


module.exports = config;

login.html 文件中的 js文件和css文件的引入给移除掉

<html lang="en">

   <header>LOGIN HEADER</header>
    <body>
        Hello login
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    </body>

</html>

执行命令：webpack 打包后，我们能在dist/biew/login.html 文件中找到 html文件引入了 login.js文件，却没有css文件，css文件需要我们进行单独打包，可以作为模块在js中引入

CSS打包

直接打包方式

执行命令：npm install css-loader style-loader --save-dev

编辑 webpack.config.js 文件


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


//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
    return {
        template : __dirname + '/src/view/' + name + '.html',
        filename : 'view/' + name + '.html',
        inject : true,
        hash : true,
        chunks : ['common',name]
    };
};


var config = {
    entry:{
        'login' :  [__dirname + '/src/page/login/index.js'],
        'logout' :  [__dirname + '/src/page/logout/index.js'],
    },
    output:{
        path: __dirname +'/dist',
        filename: 'js/[name].js'
    },
    plugins:[
       new HtmlWebpackPlugin(getHtmlConfig('login')),
       new HtmlWebpackPlugin(getHtmlConfig('logout')),
    ],
    module : {
        rules : 
        [
            { 
                test : /\.css$/,
                loader : ["css-loader"]
            },
                
        ]
    },
};


module.exports = config;

login/index.css 文件中内容

body{
    background: #556655;
}

login/index.js 文件中内容


require('./index.css')
console.log("i am login")

执行 webpack 命令进行打包后，可以在 dist/js/login.js 中找到 function(n,t,e){(t=e(3)(!1)).push([n.i,"body{\n background: #556655;\n}",""]) 这样一段代码，说明css被打包了进来

css 单独打包

html 文件中要有

标签才能被加载进来

安装命令: npm install mini-css-extract-plugin --save-dev

编辑 webpack.config.js 文件



var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
    return {
        template : __dirname + '/src/view/' + name + '.html',
        filename : 'view/' + name + '.html',
        inject : true,
        hash : true,
        chunks : ['common',name]
    };
};


var config = {
    entry:{
        'login' :  [__dirname + '/src/page/login/index.js'],
        'logout' :  [__dirname + '/src/page/logout/index.js'],
    },
    output:{
        path: __dirname +'/dist',
        filename: 'js/[name].js'
    },
    plugins:[
        //css 打包
        new MiniCssExtractPlugin(
            {
                filename : 'css/[name].css',
            }
        ),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
        new HtmlWebpackPlugin(getHtmlConfig('logout')),
    ],
    module : {
        rules : 
        [
            { 
                test : /\.css$/,
                loader : [MiniCssExtractPlugin.loader,"css-loader"]
            },
                
        ]
    },
};


module.exports = config;

执行：webpack 打包，css文件被单独打包进了 css目录下，在 login.html中以 link的方式加载进了css文件

webpack4搭建前端开发项目

html-loader

安装命令：npm install html-loader --save-dev

在 view目录下新建 layout目录，新建 layout/html-header.html 文件

<head>
    <title>Im Header</title>
</head>

login.html文件中引入

<html lang="en">

    <%= require('html-loader!./layout/html-header.html') %>

    <body>
        Hello login
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    </body>

</html>

执行 webpack 打包命令，在dist/view/login.html 中能够找到引入的 html-header.html 中的内容

url-loader 加载图片

安装命令: npm install url-loader file-loader --save-dev

编辑 webpack.config.js文件

var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
    return {
        template : __dirname + '/src/view/' + name + '.html',
        filename : 'view/' + name + '.html',
        inject : true,
        hash : true,
        chunks : ['common',name]
    };
};


var config = {
    entry:{
        'login' :  [__dirname + '/src/page/login/index.js'],
        'logout' :  [__dirname + '/src/page/logout/index.js'],
    },
    output:{
        path: __dirname +'/dist',
        filename: 'js/[name].js'
    },
    plugins:[
        //css 打包
        new MiniCssExtractPlugin(
            {
                filename : 'css/[name].css',
            }
        ),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
        new HtmlWebpackPlugin(getHtmlConfig('logout')),
    ],
    module : {
        rules : 
        [
            { 
                test : /\.css$/,
                loader : [MiniCssExtractPlugin.loader,"css-loader"]
            },
            { 
                test : /\.(gif|png|jpg|woff|svg|eotttf)\??.*$/,
                // loader : 'url-loader&limit=100&name=resource/[name].[ext]'
                use : 
                {  
                    loader :'url-loader',
                    options:
                    {
                        limit:100,
                        name: '[name].[ext]',
                        outputPath : 'resource/',
                        publicPath : '../resource/'
                    
                    }
                }
            }
                
        ],
        
    },
};


module.exports = config;

webpack4搭建前端开发项目

图片文件被单独打包到 dist/resource/ 目录下面

打包公共js代码

编辑 wbpack.config.js 文件



var MiniCssExtractPlugin = require("mini-css-extract-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

//获取 html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
    return {
        template : __dirname + '/src/view/' + name + '.html',
        filename : 'view/' + name + '.html',
        inject : true,
        hash : true,
        chunks : ['common',name]
    };
};


var config = {
    entry:{
        'login' :  [__dirname + '/src/page/login/index.js'],
        'logout' :  [__dirname + '/src/page/logout/index.js'],
    },
    output:{
        path: __dirname +'/dist',
        filename: 'js/[name].js'
    },
    plugins:[
        //css 打包
        new MiniCssExtractPlugin(
            {
                filename : 'css/[name].css',
            }
        ),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
        new HtmlWebpackPlugin(getHtmlConfig('logout')),
    ],
    module : {
        rules : 
        [
            { 
                test : /\.css$/,
                loader : [MiniCssExtractPlugin.loader,"css-loader"]
            },
            { 
                test : /\.(gif|png|jpg|woff|svg|eotttf)\??.*$/,
                // loader : 'url-loader&limit=100&name=resource/[name].[ext]'
                use : 
                {  
                    loader :'url-loader',
                    options:
                    {
                        limit:100,
                        name: '[name].[ext]',
                        outputPath : 'resource/',
                        publicPath : '../resource/'
                    
                    }
                }
            }
                
        ],
        
    },
 resolve :{
        alias : {
            util : __dirname + '/src/util',
            page : __dirname + '/src/page',
            service : __dirname + '/src/service',
            image : __dirname + '/src/image',
        }
    },
     //通用 js 打包
     optimization : {
        splitChunks:{
            cacheGroups: {
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                },
                //打包第三方类库
                vendor: {
                    name: 'vendor',
                    chunks: 'initial',
                    test: /[\\/]node_modules[\\/]/,
                    minSize: 0, 
                    minChunks: 1,

                },
                //打包重复出现的代码
                base: {
                    name: "base",
                    chunks: "initial",
                    test: /[\\/]src[\\/]/,
                    minSize: 0,
                    filename : 'js/base.js',
                    minChunks: 2,
                }
            }
        }
    }
};


module.exports = config;

src目录下增加js文件 /util/mm.js


var config = {

};

var _mm = {
    name : 'zhangsan',
    printName : function(){
        console.log('zhangsan')
    },
};

module.exports = _mm;

在 page/login/index.js 和 page/logout/index.js 都引用 mm.js这个模块

var mm = require('util/mm.js')

mm.printName();

执行 webpack 打包后，dist/js 下多出一个 base.js的文件

代码地址

代码地址

上一篇：webpack4 特性


下一篇：【转载】webpack4 命令行接口(command line interface)