初探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");