必会webpack（一）--- 初识webpack

时间 2019-12-05

标签必会 webpack 繁體版

原文原文链接

准备工做

在开始为项目加入构建前，须要先新建一个web项目，有以下方式：javascript

新建一个目录，再进入项目根目录执行npm init
用脚手架工具Yeoman(yeoman.io)直接、快速地生成一个最符合本身的需求的项目

安装webpack到本项目

安装Webpack到本项目，可根据本身的需求选择一下任意命令运行html

#npm i -D 是npm install --save-dev的简写，是指安装模块并保存到package.json的devDependenciesjava

#安装最新的稳定版 npm i -D webpackwebpack

安装最新的体验版本 npm i -D webpack@betaweb

安装webpack到全局

npm i -g webpacknpm

推荐使用这种方式安装，防止不一样的项目因依赖不一样版本的Webpack而致使冲突json

简单实战

npm install webpak --save--dev(建议使用yarn add webpack 来进行安装)
npm init(建立一个package.json文件，本次使用yarn init)
在package.json文件中配置打包命令 "scripts": { "start": "webpack --config webpack.config.js" },
搭建项目目录，以下

项目目录浏览器

index.html
main.js
show.js
webpack.config.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
         
    </div>
</body>
<script src="./dist/bundle.js"></script>
</html>
复制代码

main.js

// 经过commonjs规范导入show函数
const show = require('./show.js');
show('Webpack');
复制代码

show.js

// 操做DOM元素，将content显示到页面上
function show(content){
    window.document.getElementById('app').innerHTML('hello'+content)
}

module.exports = show;
复制代码

webpack.config.js

const path = require('path');

module.exports = {
    // JavaScript执行入口文件
    entry: './main.js',
    output:{
        // 将全部依赖的模块合并输出到一个bundle.js文件
        filename: 'bundle.js',
        // 将输出文件都放到dist目录下
        path: path.resolve(__dirname, './dist'),
    }
}
复制代码

开始执行

npm run start
复制代码

最终在目录下生成一个dist目录，目录下生成了一个bundle.js文件，bundle.js是一个可执行的javascript文件，它包含页面所依赖的两个模块main.js、show.js，以及内置的webpackBootstrap启动函数。这时用浏览器打开index.html网页，将会看到Hello Webpackbash

总结

本章只是简单的介绍了下webpack的简单使用，经过本章应该记住如何去构建一个webpack环境。接下来一章我会介绍如何使用Loader、使用Plugin、使用DevServerapp