vue中webpack的配置

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文件并配置

本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。