webpack环境搭建

Mac OS下webpack环境搭建

主要参考webpack这篇文章，简单易懂，下面记录一下主要过程和其中未提到的一些内容。

1、本地新建一个项目文件夹，例如：webpack_demo

2、进入该文件夹目录：cd webpack_demo

3、 全局安装webpack：npm install -g webpack。（如果之前有装过，可能会有警告或者错误提示，找到之前所在安装目录，直接删除即可）

4、在项目中安装webpack：npm install --save-dev webpack

         

5、在项目文件夹（webpack_demo）中新建一个标准说明文件 package.json;或者用npm init命令新建。如果用命令行，输入之后会提示一些项目信息，可写可不写（不写就直接回车默认）。

    

6、在项目文件夹（webpack_demo）中新建两个文件夹app和public。前者存放我们自己写的JavaScript模块和原始数据，后者用来存放供浏览器读取的文件。

7、继续添加文件。app中添加一个示例模块Greeter.js和主要操作模块main.js；public中添加主页index.html.

    至此，目录结构应如下。（可以直接在文件夹下手动添加文件，也可以在终端使用 touch app/main.js 创建新文件）    

    

    具体的代码内容可以参考上述链接。

    以下是三种方法实现webpack打包过程。

    （1)、终端中使用命令行。

# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}

作者：zhangwang
链接：https://www.jianshu.com/p/42e11515c10f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

        本例即：webpack app/main.js public/bundle.js。此时可以在浏览器中看到页面呈现对于的text。

    (2)、配置文件，需要在当前文件夹下新建一个webpack.config.js配置文件。

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

作者：zhangwang
链接：https://www.jianshu.com/p/42e11515c10f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

        entry和output分别对应源文件和打包后的文件，此时，只需在终端中输入 webpack 即可完成和上面一样的效果。

     

    （3)、使用npm start代替以上命令,在package.json文件中增加scripts的设置            

{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
  "author": "zhang",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

作者：zhangwang
链接：https://www.jianshu.com/p/42e11515c10f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

        此时只要在终端输入 npm start  就表示执行打包。

        

        出现的第一个问题

        无法找到webpack-cli模块，根据提示进行安装后仍然不可以。

        解决方法：换用全局安装就解决了，-D 换成 -g，即npm install webpack-cli -g

        

       出现的第二个问题   

       在实践以上过程的时候，都出现了警告和错误（错误是由于不小心把.写成了/）。有如下警告，需要设置mode。

         

        解决方法：在package.json文件中修改一下scripts部分

{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  },
  "scripts": {
    "start": "webpack --mode development",
    "bulid": "webpack --mode production"
  },
  "author": "cqr",
  "license": "ISC"
}

        最后，再试一次。可以了。

        

     至于为什么会打包两个文件，明明在配置文件中只写了一个源文件main.js?因为main中导入了Greeter.js，所以它也会被打包。