1.在项目目录下创建webpack.config.js

2.在文件中写入以下内容

module.exports={
    //__dirname是nodejs中的一个全局变量,它指向我们项目的根目录
    //入口文件的位置
    entry:__dirname+'/app/main.js',
    //出口文件
    output:{
        //打包后的文件放置的位置
        path:__dirname+'/public',
        //打包后文件名
        filename:'webpack.js'
    }
};

3.在控制台中输入以下命令进行编译(注意需要在项目目录下)
webpack
webpack 配置文件路径

注意需要安装全局的webpack才能直接写webpack命令否则需要加上配置文件路径!!!

---以下简绍一种不需要安装全局webpack也可以直接输入webpack进行编译的方法-

修改package.json文件内容为一下

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.28.3"
  },
  "devDependencies": {
    "webpack-cli": "^3.2.0"
  }
}

注意添加的是

"start":"webpack"

这里的start的node中的一个内置变量不可更改为其他名字

json文件修改完成之后在控制台输入以下内容进行编译

npm start

---有没有一种方法不需要用start的呢?当然有的,下面操作

//如果将start改成其他如hd
"hd":"webpack"

那么运行的时候控制台应输入

//注意这里的hd则是上面的名字
npm run hd

好了今天的内容就到这里吧,有什么不对的地方,欢迎指出


标签: Webpack

添加新评论