Windows下建项目文件夹(首先得在电脑上安装node 这个自己搞吧 是为了方便用npm下载依赖包 ,全局安装webpack
npm install -g webpack
)
1、创建项目文件 终端输入mkdir inner 或者你自己直接新建文件夹也可以
2、进入新建的文件夹环境下cd./inner
3、在你的项目里安装webpack 终端输入 npm i --save--dev webpack 这个时候你会发现inner文件夹下有了一个文件叫做node_modules,那就说明你在当前环境下安装webpack成功了 可以webpack -v查看下版本 哈哈哈
4、在文件夹inner中创建一个package.json文件,这是一个标准的npm说明文件,包括依赖模块自定义脚本任务等等。在终端中使用npm init命令也可以自动创建初这个package.json文件(内容如下)
{
"name": "inner",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
5、回到文件夹inner中,在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html
文件)。接下来我们再创建三个文件
:
6、在inner文件夹下见一个webpack.config.js文件 ,文件内容如下
const path=require('path');
//单入口配置
module.exports={
entry: './app/main.js',
output:{
path:path.join(__dirname,'public'),//目标文件 __dirname是node.js中的一个全局变量,它指向当前执行脚本所在的目录。 public是出口文件所在的父目录
filename:'index.js'//目标出口文件名称和index。html文件中引入的js文件名称一致
},
mode:'production'
}
//多入口配置
// module.exports={
// entry: {
// index2:'app.js',
// admin:'admin.js'
// },
// output:{
// path:__dirname+'/public',//目标文件 __dirname是node.js中的一个全局变量,它指向当前执行脚本所在的目录。 public是出口文件所在的父目录
// filename:'[name].js'//通过占位符确保文件名唯一
// },
// mode:'production'
// }
7、然后再终端运行 node_modules\.bin\webpack
就会发现在你指定的文件夹里自动生成了出口js文件,那是已经打包好了的
8、然后再浏览器直接打开你的index.html文件就可以了 看到了界面了,
但是你每次修改东西 都要重新打包一次再生效 是不是很烦
所以就要监视它的一举一动哦
在终端输入
webpack --progress --colors --watch
然后就不用再打包了 ,直接修改代码 然后刷新页面就可以了