初探webpack小记

webpack学习记录

安装webpack

全局安装webpack:npm install webpack -g之后cd进入项目文件夹,初始化:npm init ,再执行一次本地安装
安装webpack:npm install webpack --save-dev

配置webpack

编写webpack配置文件webpack.config.js

module.exports={
    entry : __dirname + "/src/js/index.js", //入口文件
    output : {
        path : __dirname + "/bulid/js", //出口文件夹位置
        filename : "index.js", //出口文件
    }
}

这样最基本的webpack配置就完成了,我们可以在src/js下写两个两个js文件test下。

add.js

module.exports={
    add : function(a,b){
        return console.log(a + b);
    }
}
index.js

var add=require("./add");
add(2,4);

再控制台敲入webpack回车这时在bulid/src下就生成了index.js
在index.html中引入,打开浏览器控制台成功输出6

使用webpck-dev-server

编写webpack配置文件webpack.config.js

const path=require("path");
module.exports={
    entry : __dirname + "/src/js/index.js", //入口文件
    output : {
        path : __dirname + "/bulid/js", //出口文件夹位置
        filename : "index.js", //出口文件
        public : "temp",//临时目录
    },
    devServer : {
        contentBase: path.resolve(__dirname,"./"),
        host : "localhost", //地址
        port : "8080", //端口
        compress : true, //压缩代码
    }
}

打包css

打包css需要css-loader和style-loader,可以直接上npmjs.org上查找,首先我们需要安装这两个依赖。npm install --save-dev css-loader style-loader 安装成功后我们修改配置文件如下,这样我们就可以在入口文件里require我们的css文件,运行webpack会帮我们打包到js文件里去

const path=require("path");
module.exports={
    entry : __dirname + "/src/js/index.js", //入口文件
    output : {
        path : __dirname + "/bulid/js", //出口文件夹位置
        filename : "index.js", //出口文件
        public : "temp",//临时目录
    },
    devServer : {
        contentBase: path.resolve(__dirname,"./"),
        host : "localhost", //地址
        port : "8080", //端口
        compress : true, //压缩代码
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use:["css-loader","style-loader"]
            }
        ]
    }
}

使用方法直接在入口文件里require或者使用es6语法,运行指令webpack进行打包就可以看到效果

import css from "./one.css"
或者
var css=require("./one.css");
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,243评论 0 21
  • 学习流程 参考文档:入门Webpack,看这篇就够了Webpack for React 一. 简单使用webpac...
    Jason_Zeng阅读 3,188评论 2 16
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,759评论 0 1
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • 我励志要考北大, 却不料高中复读五年。 以前总是跟在我屁股蛋后面,喊“哥哥哥哥等等我”,连酱油都不会打的邻居家小毛...
    子水景夜阅读 966评论 0 1