ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

webpack4搭建前端开发项目

2020-05-18 21:07:21  阅读：288  来源： 互联网

标签：webpack4 name js webpack html login 前端开发 css 搭建


目录

npm初始化项目

npm init

  • 新建文件 webpack.config.js

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

命令行中，在项目的根目录下 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"
  }
}

正常的文件结构和效果

在一个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 打包命令：

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文件

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;

图片文件被单独打包到 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,name,js,webpack,html,login,前端开发,css,搭建
来源： https://www.cnblogs.com/ainewbegin/p/12911660.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有