vue中webpack的配置

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue中webpack的配置

          • npm init -y(生成package.json文件)

          • 实时打包：npm i webpack-dev-server

          • 创建webpack.config.js文件

          • 配置webpack.config.js文件

          • 在package.json中添加一个脚本

          • 自动将打包好的bundle.js追加到页面

          • 处理第三方文件

          • Babel(将es6中高级的语法转换为低级语法)

webpack 是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

npm init -y(生成package.json文件)

实时打包：npm i webpack-dev-server

创建webpack.config.js文件

配置webpack.config.js文件

在package.json中添加一个脚本

在scripts中

“script”:{

“dev”:“webpack-dev-server --open --port 8080 --contentBase src --hot”

}

这样就可以通过npm run dev 启动项目啦，而且还能够实时编译，实时打包

自动将打包好的bundle.js追加到页面

1.npm i html-webpack-plugin -D

2.配置webpack.config.js文件中的plugin节点

处理第三方文件

1.npm i style-loader css-loader -D //处理css文件

npm i less-loader less -d //处理less文件

npm i sass-loader node-loader -d //处理sass文件

npm i url-loader file-loader -d //处理css文件中的url地址

npm i vue-loader vue-template-complier //处理vue文件

2.配置webpack.config.js中的module模块

Babel(将es6中高级的语法转换为低级语法)

1.npm i babel-core babel-loader babel-plugin-transform-runtime -d

npm i babel-preset-env babel-preset-stage-0 -d

2.配置webpack.config.js文件

{test: /.js$/, use:[‘babel-loader’],exclude:/node_modules/},

3.在根目录下创建.babelrc文件并配置

以上是 vue中webpack的配置 的全部内容， 来源链接： utcz.com/z/375671.html

回到顶部