Webpack学习--简单构建入门

最新推荐文章于 2024-05-29 21:08:09 发布

真的137

最新推荐文章于 2024-05-29 21:08:09 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/weixin_38601104/article/details/86504935

版权

参考：
阮一峰老师的教程
《深入浅出Webpack》

1、全局安装 webpack 和 webpack-dev-server

$ npm i -g webpack webpack-dev-server

2、下载demo

git clone https://github.com/ruanyf/webpack-demos#demo01-entry-file-source

3、安装依赖

$ cd webpack-demos
$ npm install

4、运行脚本

$ cd demo01
$ npm run dev

如果不能自动打开浏览器就得自己手动输入http://127.0.0.1:8080就可以在浏览器看到hello world了

Webpack是什么？

Webpack是为浏览器构建JavaScript依赖脚本的工具
Webpack需要以CommonJS模块为基础的webpack.config.js文件来配置其他文件。

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

构建以main.js为文件查询入口，将所有文件经过某些处理（可另外配置）后输出到bundle.js。
有了webpack.config.js，你可以在命令行中输入webpack不带任何参数就可以i 完成构建。当然也可以用下面这些参数的命令

webpack			 			用于在开发环境下构建
webpack -p 					用于在生产环境下构建
webpack --watch 		一旦文件发生变化便理解重新构建
webpack -d                 在构建的过程中保留源文件和目标文件之间的映射关系
webpack --colors 		构建过程中颜色漂亮

可以在package.json中自定义脚本命令

// package.json
{
  // ...
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors",
    "deploy": "NODE_ENV=production webpack -p"
  },
  // ...
}

npm run dev 就等同于执行‘webpack-dev-server --devtool eval --progress --colors’

有个小技巧在vscode中ctrl+shift+p 输入shell就可以在命令行中输入 code filename 在vscode里面打开想要打开的文件。

开始动手实现

1、创建main.js文件

document.write('<h1>hello world</h1>');

2、创建webpack.config.js文件

module.exports = {
module.exports = {
    entry: './main.js',
    output: {
      filename: 'bundle.js'
    }
  };

3、创建index.html文件

<html>
    <body>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

4、初始化项目生成package.json文件

npm init

package.json:

{
  "name": "webpack-demo1",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack -p"
  },
  "license": "MIT"
}

5、启动项目

npm run dev

发现错误

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli

webpack升级到4.0.1，执行webpack命令报错：
全局安装：
npm i -g webpack-cli
全局安装webpack-cli后，使用webpack -v成功。
在项目本地安装webpack，webpack-cli：
npm install webpack webpack-cli -D
在启动npm run dev
又报错：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

以上的警告指的是没有设定是开发模式还是生产模式,要求指定.
只需要在项目中的package.json中script中配置上 -p 即可
package.json:

{
  "name": "webpack-demo1",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --open -p",
    "build": "webpack -p"
  },
  "license": "MIT"
}

在这里插入图片描述
完成，项目启动后自动打开浏览器

真的137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack学习--简单构建入门

下面的教程参考：阮一峰老师的教程《深入浅出Webpack》1、全局安装 webpack 和 webpack-dev-server$ npm i -g webpack webpack-dev-server2、下载demogit clone https://github.com/ruanyf/webpack-demos#demo01-entry-file-source3、安装依赖$...
复制链接

扫一扫