webpack1学习笔记

alexnevsky 发布于2019-08-20 15:28 / 3117人阅读

摘要：基本介绍引入文件打包文件预览选项参数基本配置创建项目创建并引入创建可参考官网配置模块化输出指定文件为详解和的种单一字符串，数组，对象根绝不同而不同数组和打包成对象多页面应用

基本介绍

引入文件

// a.js
require("./b.js")
require("style-loader!css-loader!./a.css")

打包文件

// cli
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader!"

预览html

// html

webpack选项参数
--watch
--progress
--display-modules
--display-reasons
--color
--display-error-details

基本配置

创建项目
mkdir webpack-demo
cd webpack-demo
npm init
npm install webpack --save-dev
mkdir src
mkdir dist
vsc //vscode
创建html并引入bundle.js
创建webpack.config.js//可参考官网配置API

//模块化输出
module.exports={
    // 
    entry:"./src/script/main.js",
    output:{
        path:"./dist/js",
        filename:"bundle.js"
    },
}
//cli
webpack --config webpack.dev.config.js//指定config文件为webpack.dev.config.js
//

详解entry和output

entry的3种：单一字符串，数组，对象
output根绝entry不同而不同
【数组】
main和sub-main打包成bundle

module.exports={
    entry:[
    "./src/script/main.js",
    "./src/script/sub-main.js"
    ],
    output:{
        path:"./dist/js",
        filename:"bundle.js"
    },
}

【对象】--多页面应用
main和打包成bundle

module.exports={
    entry:{
        page1:"./src/script/main.js",
        page2:[
            "./src/script/main.js",
            "./src/script/sub-main.js"
        ],    
    },
    output:{
        path:"./dist/js",
        //【占位符】hash本次 chunkhash静态资源改变后才变化
        filename:"[name]-[hash]-[chunkhash].js"
    },
}

使用插件 html-wabpack-plugin

作用：同步html内引入的js的chunkhash

//cli
npm install html-wabpack-plugin --save-dev
//webpack.config.js
var htmlWebpackPlugin=require("html-wabpack-plugin")
module.exports={
    // 上下文的默认环境就是当前运行脚本的目录
    // context:
    entry:{
        page1:"./src/script/main.js",
        page2:[
            "./src/script/main.js",
            "./src/script/sub-main.js"
        ],    
    },
    output:{
        path:"./dist",
        // js
        filename:"js/[name]-[hash]-[chunkhash].js",
        // 上线环境的
        publicPath:"http://m.mi.com/"
    },
    // 所有plugin都输出到output.path
    plugin:[
        //初始化插件 并传入相关参数
        new htmlWebpackPlugin({
            // 上下文环境 以根目录html作为模板 
            template:"index.html",
            filename:"index-[hash].html",
            inject:"head",//不配置的话 默认放到body标签内
            //向html里面传参,
            //在html用<%= htmlWebpackPlugin.options.title %>接收
            title:"haha",//date:new Date(),
            //压缩html 删除注释和空格
            minify:{
                removeComments:true,
                collapseWhitespace:true
            }
        });
    ]
}




<% for (var key in htmlWebpackPlugin.files) {%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>

<% for (var key in htmlWebpackPlugin.options) {%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>

云服务器服务器托管学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82267.html

webpack1学习笔记

摘要：基本介绍引入文件打包文件预览选项参数基本配置创建项目创建并引入创建可参考官网配置模块化输出指定文件为详解和的种单一字符串，数组，对象根绝不同而不同数组和打包成对象多页面应用基本介绍引入文件 // a.js require(./b.js) require(style-loader!css-loader!./a.css) 打包文件 // cli webpack hello.js hel...

LdhAndroid 2019-08-29 12:20 评论0 收藏0
webpack1学习笔记

摘要：基本介绍引入文件打包文件预览选项参数基本配置创建项目创建并引入创建可参考官网配置模块化输出指定文件为详解和的种单一字符串，数组，对象根绝不同而不同数组和打包成对象多页面应用基本介绍引入文件 // a.js require(./b.js) require(style-loader!css-loader!./a.css) 打包文件 // cli webpack hello.js hel...

DevYK 2019-08-01 16:35 评论0 收藏0
webpack v2升级踩坑笔记

摘要：从再到目前当红明星，前端模块打包技术日新月异，在今年月份和月份左右接连更新了和版本为了减少冗余模块，缩减文件大小，中也加入了关于的特征，可以查看知乎如何评价新引入的代码优化技术的讨论。从Grunt->gulp->webpack,再到目前当红明星rollup，前端模块打包技术日新月异，webpack在今年1月份和6月份左右接连更新了v2和v3版本,为了减少冗余模块，缩减bundle文件...

JayChen 2019-08-20 17:59 评论0 收藏0
小白上学のwebpack+vue初级使用指南

摘要：但我们今天学的是，原因我还不会而且新手还是学习为主吧。原因中文文档全，学习曲线简单，很容易上手。后续总结在学习打包工具过程中由于出现的问题各种蛋疼，让很多人都半途而废。大家互相学习共同进步本节讲的都是很基础的东西，自己可以延展一下。写这篇文章的时候先说一下原因：webpack：现在很流行的打包工具；推荐原因：学习成本比gulp，fis3等简单，就是这么直接！vue：国人开发的MVVM...

PascalXie 2019-08-20 11:38 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 评论0 收藏0