欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用webpack打包项目需要的包

程序员文章站 2021-11-28 11:23:26
...

babel转译es6==>es5

npm install babel-core --save-dev

npm install babel-loader --save-dev

npm install babel-preset-es2015 --save-dev

npm install babel-preset-stage-0     解es7语法

新建文件 .babelrc

解析样式

css-loader   

style-loader

预处理

less  

less-loader

解析图片

file-loader

url-loader

解析html,自动插入

html-webpack-plugin

webpack-dev-server

解析vue

vue

vue-loader

vue-template-compiler

生成项目文件

vue init webpack 项目名

//webpack.config.js文件
const path=require('path');
//用来将打包的文件自动引入html并输出到dist目录下
var HTMLWebpackPlugin = require("html-webpack-plugin");
module.exports={
        entry:'./src/main.js',  //打包的入口文件,webpack会自动查找相关的依赖包进行打包
        output:{
            filename:"bundle.js",  //打包后的名字
            path:path.resolve('./dist')   //必须是一个绝对路径
        },
        module:{
            rules:[
                {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
                //use时从右向左写
                {test:/\.css$/,use:['style-loader','css-loader']},
                {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
                //转化base64只在8192字节下转化,其他情况输出图片
                {test:/\.jpg$/,use:'url-loader?limit=8192'},
                {test:/\.vue$/,use:'vue-loader'}
            ]
        },
        plugins:[
            new HTMLWebpackPlugin({ //自动插入到dist目录下
                template:'./src/index.html',//使用的模板
                //filename:'login.html'   //产出的文件名,默认为原文件名
            })
        ]

    }
//.babelrc文件
{
    "presets": ["es2015","stage-0"]
}
//package.json文件
{
  "name": "vue-load",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev":"webpack-dev-server",
    "build":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader":"^7.1.2",
    "babel-preset-es2015":"^6.24.1",
    "babel-preset-stage-0":"^6.24.1",
    "css-loader":"^0.28.7",
    "file-loader":"^1.1.5",
    "html-webpack-plugin":"^2.30.1",
    "less":"^3.0.0-alpha.3",
    "less-loader":"^4.0.5",
    "style-loader":"^0.19.0",
    "url-loader":"^0.6.2",
    "vue-loader":"^13.3.0",
    "vue-template-compiler":"^2.5.2",
    "webpack":"^3.8.1",
    "webpack-dev-server":"^2.9.2"
  },
  "dependencies": {
    "bootstrap":"^3.3.7",
    "vue":"^2.5.2",
    "vue-router":"^3.0.1"
  }
}

 

相关标签: npm