webpack安装与使用

webpack： JavaScript 应用程序的静态模块打包器

安装webpack前需要搭建node环境：

　　1. 安装node.js(https://nodejs.org/en/), 安装完后会自动生成 npm 包管理器

　　2. 测试node环境运行命令 node -v , npm -v

然后开始安装webpack

　　1. 全局安装 npm install webpack -g , npm install webpack-cli -g

　　2. 创建项目目录

　　　　mkdir webpack-demo && cd webpack-demo

　　3. 初始化 npm:

　　　　npm init -y 　　//会自动创建package.json文件

　　4. 搭建本地服务器

　　　　npm install webpack-dev-server --save-dev

　　5. 在package.json文件中编写脚本

　　　　"build" : "webpack",

　　　　"start": "webpack-dev-server --open"

　　6. 调整目录结构

　　　　webpack-demo下新建文件夹dist和src, dist存放打包后的文件， src是源文件

　　　　webpack-demo/dist ,

　　　　webpack-demo/index.html ,

　　　　webpack-demo/webpack.config.js

　　　　webpack-demo/src/main.js

　　7. 文件内容：

main.js:

　　document.write("str");

index.html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>webpack demo</title>
</head>
<body>
<div>webpack</div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

webpack.config.js:

const path = require('path');
module.exports = {
  entry: './src/main.js',  //指定入口文件
  output: {　　　　　　　　　　　　
    filename: 'bundle.js',　　//项目编译后的文件名和路径
    path: __dirname+ '/dist/'
  }
};

　　8. 执行 npm run build 生成编译好的文件，webpack-demo/dist/bundle.js

　　　执行 npm start 开启服务器端口，浏览器打开http://localhost:8080/调试页面，ctrl+c 关闭端口

　　9. 引入css文件，因为webpack只能识别js文件，所以需要安装依赖

　　　　npm install style-loader css-loader --save　

　　　　创建文件 webpack-demo/src/style/a.css

　　　　在main.js中引入a.css ：require("./style/a.css");

　　　　webpack.config.js文件配置：

 module:{
  	rules: [
  		{
  		　　test: /\.css$/,
  		　　use: ['style-loader','css-loader']
  		}
  	]
  }

　　然后在a.css文件写入样式，可以正常展示

猜你喜欢