webpack配置打包

发布时间:2020-11-20 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了webpack配置打包前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、webpack基本安装

1、创建webpack项目目录如webpackDemo,并进入webpackDemo;

2、 在node已经安装的前提下,打开命令行控制器,输入如下命令:

npm init -y 
npm install webpack webpack-cli --save-dev  //安装webpack webpack-cli
(MacOS: sudo npm install webpack webpack-cli -g,sudo npm isntall webpack webpack-cli --save-dev)

命令执行结束后,会生成package.json、package_lock.json、node_modules文件。然后手动创建src目录与package.json平级,src目录下有index.html ,index.js 。

注:npm使用的是淘宝镜像,使用命令 npm install --registry=https://registry.npm.taobao.org express (临时使用);

  (MacOS 如果上面命令不生效,可以使用此命令: npm config set registry https://registry.npm.taobao.org).

二、webpack概念

1、 webpack有四个核心概念:entry(入口) 、output(输出)、loader、plugin(插件)。

entry(入口)

告诉webpack构建内部依赖图开始的模块;可以指定单入口起点文件或多入口起点文件。

module.exports = {
    entry:"./src/index.js"
}

 

output(输出

告诉webpack输出创建的bundles,以及如何命名文件。指定编译后的输出文件路径。

const OUTPUT_FILE_NAME = "dist"
module.exports =,output: {
        filename: "[name].[contenthash:10].js",输出文件名称, hash解决缓存问题
        path: path.resolve(__dirname,'dist') 输出文件路径
    }
}

 

loader

loader可以让webpack可以处理非JavaScript文件,webpack本身只能处理JavaScript。

webpack配置loader有两个目标:

a).  test属性,用于被对应的loader进行转换的某个和某些文件;

b).  use属性,表示进行转换时,应该使用哪个loader;

module.exports = {
    output: {
        filename: "[name].[contenthash:10].js",OUTPUT_FILE_NAME)     },module: {
        rules: [{
                整理html的img资源,
                test: /\.html$/]
            },{
                处理css资源
                test: /\.css$/处理JS资源
                test: /\.jsx?$/]
            }]
    }
}

 

插件plugins

loader用于转换某些类型,插件用于执行更广泛的任务。若使用一个插件,只需require(),然后添加到数组中。

module.exports = {
    ...,plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"true
        }), MiniCssExtarctPlugin({
            filename: 'css/[name].[contenthash:10].css'
{
  "name": "webpack_demo": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },"keywords": [],"author": ""
}

 

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtarctPlugin = require("mini-css-extract-plugin"); 将css从js中提取出来

const OUTPUT_FILE_NAME = "dist";
module.exports = {
    entry: "./src/index.js"输出文件名称,hash解决缓存问题,具体可见下面的解释
        path: path.resolve(__dirname,mode: "development",1)">开发环境,生产环境使用"production"
    module: {
        rules: [{
                将css文件整合到JS文件中
                    "css-loader"创建style标签,将样式放入 
                    "style-loader" css兼容性处理:postcss-->postcss-loader postcss-preset-env
                ]
            },1)">处理JS资源
                test: /\.js$/处理除了nodde_modules里的js文件
                loader: 'babel-loader' 用babel-loader处理

            },1)">处理图片资源
                test: /\.(png|svg|jpg|gif)$/ exclude: /\.(css|js|html)$/,//排除正则内的资源
                test: /\.(png|svg|jpg|gif)$/ 这里是匹配条件,每个选项都接收一个正则表达式或字符串
                 test 和 include 具有相同的作用,都是必须匹配选项
                 exclude 是必不匹配选项(优先于 test 和 include)
                 最佳实践:
                 - 只在 test 和 文件名匹配 中使用正则表达式
                 - 在 include 和 exclude 中使用绝对路径数组
                 - 尽量避免 exclude,更倾向于使用 include
                use: ['file-loader'],1)"> options: {
                     name: "[hash:10].[ext]" //名字太长进行截取
                 }
            }
        ]
    },resolve: {
        extensions: ['.js','.json']
    },1)">/*
    source-map:外联
    inline-source-map :
    */
    devtool: "source-map",1)">告诉webpack提供源代码

    plugins: [
         将CSS文件从JS文件中提取出来
        
        })
    ],devServer: {
        port: 5000,1)">端口号
        contentBase: OUTPUT_FILE_NAME,1)">可访问问文件
        hot: true,1)">开启HMR热更新
        https: 使用https
        compress:  启用压缩
         proxy: {
             "/": "http://localhost:3000",//使用代理路径
        * code splitting 代码分割
     * 当单入口时,可以将 node_modules中代码单独打包成一个chunk;
     * 当多入口时,提取公共文件单独打包成一个chunk;
     
    optimization: {
        splitChunks: {
            chunks: "all"
        }
    }

    *
     * 缓存:
     * Babel缓存  
     *      cacheDirectory:true
     *       -->让第二次打包更快 
     * 文件资源缓存:
     *      hash :每次webpack构建是会生成一个唯一的hash值;
     *      问题:js和css使用同一个hash值,会导致缓存失效,可能值改变一个文件;
     *      chunkhash:根据chunk生成的hash值,如果打包来自同一个chunk,那么hash是一样的
     *      问题:chunkhash是一样的,因为css是在js中被引用的,属于同一个chunk;
     *      contenthash:根据文件内容生成hash值,不同文件的hash值不一样;
     *       -->让代码上线运行缓存更好使用 
     * 
     */

    *
     * tree shaking:去除无用代码
     * 前提: 1.必须使用ES6模块化  2.开启production环境
     * 作用: 减少代码体积
     * 
     * 在package.json中设置:
     *      sideEffects:false 所有代码都没有副作用(都可以进行tree shaking)
     *      问题:可能会把css @babel/polyfill(副作用)文件干掉
     *      sideEffects:["*.css",".less"] 不会进行tree shaking
     *
     * HMR :hot module replacement 热模块
     * 作用:一个模块发生变化指挥重新打包这个模块,并不重新打包所有。提高打包速度。
     * 样式文件:可以通过HMR实现,style-loader已实现
     * JS文件:默认不使用HMR功能-->修改JS文件代码,只能处理非入口文件。
     * if(module.hot){
     *      module.hot.accept("index.js",()=>{
     *          //监听文件变化,一旦发生变法,其他地方不会重新打包,直接执行回调
     *      }))
     * }
     * Html文件:默认不使用HMR功能,同时会出问题(无需做HMR功能)
     * 解决方案:修改entry入口,引入html文件
     * 
     * 
     
}

wenpack.config.pro.js

const path = require("path"将css从js中提取出来
const OptiminizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 压缩CSS
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const OUTPUT_FILE_NAME = "dist"
        chunkFilename: 'js/[name].[contenthash:10].bundle.js',1)">  依赖文件名称  
        path: path.resolve(__dirname,OUTPUT_FILE_NAME),1)">输出文件路径
        publicPath: '/'   公共路径 
生产环境
    module: {
        rules: [{
                test: /\.html$/"css-loader"用babel-loader处理es6
            },{
                test: /\.(png|svg|jpg|gif)$/    plugins: [
        *
         * optimize-css-assets-webpack-plugin  会使webpack中自带的JS压缩失效,需要重新配置UglifyJsPlugin
         */
         OptiminizeCssAssetsPlugin(),],1)">
        }
    }
}

 

总结


以上是前端之家为你收集整理的webpack配置打包全部内容,希望文章能够帮你解决webpack配置打包所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。