Webpack学习笔记1：搭建与运行

身为一名前端工程师，居然对Webpack一知半解，实在是让我非常的内疚，所以下定决心要系统的学习一下。

学习的主要参考书籍是《shen深入浅出Webpack》，看了一章，觉得讲的还是比较实用，所以写一下读书笔记，以供自己整理知识点。

安装与运行

• 新建一个目录，进入根目录执行 npm init 来初始化项目；
• 安装Webpack，npm i -D  webpack，npm i -D 是 npm install --save-dev的简写；
• 新建一个index.html文件;
• 存放工具函数的show.js，用CommonJS规范输出一个函数接口；

function show(content){
    window.getElementById("app").innerText = content;
}
module.exports = show;

• 包含执行入口的main.js；

const show = require('./show.js');
show(“hello world”);

• 新建webpack.config.js

const path = require('path');
module.exports = {
      //执行入口文件
      entry:'./main.js',
      output:{
            //将所有依赖的模块合并输出到一个bundle.js文件
            filename:'bundle.js',
            //将输出文件都放到dist目录下
            path:path.resolve(__dirname,'./dist'),
      }
};

• 在根目录下执行webpack命令运行Webpack构建；

node_modules/.bin/webpack

• css-loader和style-loader。style-loader会将css注入到JS中。

npm i -D style-loader css-loader

• 使用DevServer

npm i -D webpack-dev-server
执行：webpack-dev-server

DevServer自带watch功能，文件自动bian编译。