内容简介：在开始为项目加入构建前，需要先新建一个web项目，有如下方式：安装Webpack到本项目，可根据自己的需求选择一下任意命令运行#npm i -D 是npm install --save-dev的简写，是指安装模块并保存到package.json的devDependencies
在开始为项目加入构建前，需要先新建一个web项目，有如下方式：
- 新建一个目录，再进入项目根目录执行npm init
- 用脚手架工具Yeoman(yeoman.io)直接、快速地生成一个最符合自己的需求的项目
安装webpack到本项目
安装Webpack到本项目，可根据自己的需求选择一下任意命令运行
#npm i -D 是npm install --save-dev的简写，是指安装模块并保存到package.json的devDependencies
#安装最新的稳定版 npm i -D webpack
安装最新的体验版本 npm i -D webpack@beta
安装webpack到全局
npm i -g webpack
推荐使用这种方式安装，防止不同的项目因依赖不同版本的Webpack而导致冲突
简单实战
- 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 Webpack
总结
本章只是简单的介绍了下webpack的简单使用，通过本章应该记住如何去构建一个webpack环境。接下来一章我会介绍如何 使用Loader 、 使用Plugin 、 使用DevServer
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
