webpack学习

luckyyulin 发布于2019-08-26 11:55 / 811人阅读

摘要：全局安装安装现在我们就可以全局的使用命令了中基础的命令这个命令是将打包成，然后只需要引用该文件就可以了看如下这是简单的代码。

全局安装安装webapck

</>复制代码 
npm i webpack -g

现在我们就可以全局的使用webpack命令了

webpack中基础的命令：

</>复制代码 
webpack enter.js output.js --watch

这个命令是将enter.js打包成output.js，然后html只需要引用该文件就可以了
看如下entry.js,这是简单的js代码。

</>复制代码 
// 这边是处理js逻辑
let people = require("./people")
let $ = require("jquery")
$.each(people, function(key, value){
    $("body").append(""+people[key].name+"
")
})

那么如何来打包css文件呢，只需要将css也引入到enter.js即可，这样跟文件index.html还是只需要引用output.js即可
引入css需要几个插件；css-loader， style-loader（由于是静态文件，需要编译）

</>复制代码 
require("!style-loader!css-loader!./style.css")

以上为简单的打包；如果需要复杂的工程的话，webpack推荐使用配置文件来配置
webpack的配置文件必须是webpack.config.js
上面的配置只需要这样写

</>复制代码 
module.exports = {
    // 入口文件
    entry: "./app.js",
    // 出口文件
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    // 需要依赖的插件或装载器
    mudule: {
        loader: [
            {
                test: /.css$/,
                loader: "style-loader!css-loader"
            }
        ]
    }
}

以下是一个简易的开发目录

针对该目录配置文件如下
ps: 需要将es6转码需要安装 babel-core,babel-loader,babel-env,babel-preset-es2015

</>复制代码 
module.exports = {
    // 入口文件
    entry: ".src/js/app.js",
    // 出口文件
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    // 需要依赖的插件或装载器
    mudule: {
        loader: [
            // css加载
            {
                test: /.css$/,
                loader: "style-loader!css-loader"
            },
            // es6转码为es2015
            {
                test: /.js/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015"]  // ps这一块也可以写在.babelrc文件下
                },
                exclude: /node_modules/
            }
        ]
    },
    // 自动生成html文件，会引入js
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: "./index.html"})
    ]
}

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

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

webpack入门学习手记（一）

摘要：争取早日能完全抛弃掉中文文档，最终可以翻译英文文档，输出英文文档。待续相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四本人微信公众号：前端修炼之路，欢迎关注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用过gulp、grunt，但是一直没有学习过webpack。这两天刚好有时间，学习了下...

mengera88 2019-08-23 14:01 评论0 收藏0
webpack 学习笔记（一）

摘要：引言最近在学习，发现好多知识点，之前一点都没有接触过，如等等。使用本地安装，会存于文件夹内与属性内，更方便项目文件迁移以及协同开发等情况。引言最近在学习webpack，发现好多知识点，之前一点都没有接触过，如babel、core-js、browserslist等等。以前习惯了使用cli构建项目，很多东西不用考虑，拿来就用，这样的码农是不会有能力提升的，必须了解更多的知识点，才能成为...

zhangwang 2019-08-26 10:36 评论0 收藏0
webpack入门学习手记（二）

摘要：例如现在的入门学习手记系列。收到粉丝留言和打赏的喜悦。安装上一篇入门学习手记一，主要是介绍了的核心概念，是整个学习过程的基础知识。新生成的类似如下入门学习手记因为生成的内容过多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号：前端修炼之路，欢迎关注。最近开始想要维护一个个人的公众...

Joyven 2019-08-23 14:05 评论0 收藏0
我的webpack学习笔记（一）

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。前言在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 评论0 收藏0
我的webpack学习笔记（一）

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。前言在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 评论0 收藏0