webpack4搭建项目以及vue模块化引入

最新推荐文章于 2021-11-30 14:00:48 发布

小小曼

最新推荐文章于 2021-11-30 14:00:48 发布

阅读量245

点赞数

分类专栏： webpack 文章标签： webpack4以及vue

本文链接：https://blog.csdn.net/qq_42957120/article/details/97280855

版权

本文介绍了如何使用webpack4搭建一个项目，并结合vue进行模块化开发。详细步骤包括：初始化项目、配置webpack、创建入口文件、设置devServer、引入vue、处理样式、使用babel转码、处理async/await、引入图片资源、实现单文件组件以及代码调试和优化。通过这个教程，读者可以掌握webpack4与vue的集成应用。

摘要由CSDN通过智能技术生成

webpack4 搭建项目结合vue

//新建文件夹xxx

第一步

npm init // 创建package.json
npm i webpack
npm i webpack-cli //webpack4 必须单独安装webpack-cli
npm i webpack-dev-server

第二步

根目录下新建index.html

Document

第三步

根目录下新建webpack.config.js

var path = require(‘path’);
var webpack = require(‘webpack’);

module.exports = {};

第四步

新建src文件夹，src文件夹下新建main.js
----node_modules
----src
----main.js
----index.html
----package-lock.json
----package.json
----webpack.config.js

第五步

src目录下新建一个utils.js

module.exports = function say() {
console.log(‘hello world’);
}

然后main.js里写

var say = require(’./util’);
say();

第六步

修改webpack.config.js

var path = require(‘path’);
var webpack = require(‘webpack’);

module.exports = {
entry: ‘./src/main.js’, // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包
output: {
path: path.resolve(__dirname, ‘./dist’), // 项目的打包文件路径
publicPath: ‘/dist/’, // 通过devServer访问路径
filename: ‘build.js’ // 打包后的文件名
},
devServer: {
historyApiFallback: true,
overlay: true
}
};

然后package.json文件中添加

“scripts”: {
“dev”: “webpack-dev-server --open --hot”,
“build”: “webpack --progress --hide-modules”
},

第七步

修改index.html,引入打包后的文件

Document

第八部

运行 npm run dev 浏览器会看见 hello world
我们随意修改util.js，可以发现