Webpack安装

全局安装

npm install -g webpack webpack-cli

安装后查看版本号

webpack -v

初始化项目

创建webpack文件夹

进入webpack目录，执行命令

npm init -y

创建src文件夹

src下创建common.js

exports.info = function (str) {document.write(str);
}

src下创建utils.js

exports.add = function (a, b) {return a + b;
}

src下创建main.js

const common = require('./common');
const utils = require('./utils');common.info('Hello world!' + utils.add(100, 200));

JS打包

webpack目录下创建配置文件webpack.config.js

以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块
module.exports = {entry: './src/main.js', //配置入口文件output: {path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径filename: 'bundle.js' //输出文件}
}

命令行执行编译命令

webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {//...,"dev": "webpack --mode=development"}

运行npm命令执行打包

npm run dev

webpack目录下创建index.html

引用bundle.js

<body><script src="dist/bundle.js"></script>
</body>

浏览器中查看index.html

webpack打包js文件相关推荐

webpack打包js文件的问题
前言这里记录下webpack打包js文件的配置和遇到的问题.因环境版本等不同,解决办法未必都是通用的,仅作为大家参考之用: 我的环境配置 macOS M1 系统 webpack版本:(全局版本)we ...
webpack打包js文件，图片路径错误，没有将图片打包的问题
初用 webpack 进行项目开发的同学会发现:在 js 或者 vue 中引用的图片都没有打包进 bundle 文件夹中.这时是需要require的方式进行图片路径的引用,这样引用的图片就可以成功打包 ...
Webpack5:用webpack打包js文件
前提:node.js和npm已安装好 node.js和npm的安装网上教程一大堆,就不说了,建议初学者将node.js和npm装在c盘,能避免很多操作和麻烦(特指windows用户,有点想买mac了, ...
webpack初体验_使用webpack打包js文件_json文件_使用webpack开发模式_生产模式打包---webpack工作笔记003
我们首先去初始化一下npm npm init 然后package name 输入webpack_test 然后初始化npm以后,我们去安装npm i webpack webpack-cli -g 全 ...
webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件...
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
前端打包js文件的工具 webpack
前端打包js文件的工具 webpack 安装webpack工具 npm install -g webpack webpack-cli 创建js文件用于打包操作即在一个最终的js文件中引入其它的js文 ...
webpack打包vue文件报错，但是cnpm run dev正常，最后我只想说：是我太笨，还是webpack4.4版本太坑...
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
webpack教程(二)——webpack.config.js文件
首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugi ...
webpack打包js/css/scss/less/styl等（可以打包图片）
Webpack 1. 什么是webpack? 打包,压缩各种静态资源的工具(css,js,图片,图标等) 2.目的性能优化减少浏览器向服务端请求的次数节约服务器的的带宽资源 3.如何使用介绍 ...

webpack打包js文件

Webpack安装

全局安装

安装后查看版本号

初始化项目

创建webpack文件夹

创建src文件夹

src下创建common.js

src下创建utils.js

src下创建main.js

JS打包

webpack目录下创建配置文件webpack.config.js

命令行执行编译命令

webpack目录下创建index.html

浏览器中查看index.html

webpack打包js文件相关推荐

最新文章

热门文章