学习笔记-webpack安装及环境搭建

最好基于[email protected]以上版本安装：

使用webpack的优点：

webpack使用commonJS标准编写的模块可以直接打包运行在浏览器上brower

webpack安装：
window+r --> cmd
npm install webpack-cli -g
npm install webpack -g
cd到项目目录：
npm install webpack -D
或者
npm install --save-dev webpack

自行创建webpack.config.js文件

要实现ES6和commonJS的混搭使用，需安装转换器(loader)：
babel-core
babel-loader
babel-preset-env
babel-preset-stage-0

即:
npm install babel-core babel-loader babel-preset-env babel-preset-stage-0 -D

并在webpack.config.js文件的module:{}中进行配置：
module:{
rules:[
{test:/\.js$/,loader:"babel-loader",query:{presets:["env","stage-0"]}}
]
}

为减少http请求，需用webpack合并css和js文件:

css -> stylesheet
js -> application/js

要实现css和js的混搭使用(css+js -> main.js)，需安装转换器(loader)：
style-loader css-loader
即：

npm install style-loader css-loader -D

并在webpack.config.js文件的module:{}中进行配置：
module:{
rules:[
{test:/\.css$/,loader:"style-loader!css-loader"},
{test:/\.js$/,loader:"babel-loader",query:{presets:["env","stage-0"]}}
]
}

如果要使用webpack+babel-core编译vue单页面组件（xx.vue singlepage componet）
即工程化，操作如下：

注意：在安装vue-loader之前，一定要确定css-loader和style-loader已经安装上了

（npm install style-loader css-loader -D 反复多装几次）

然后安装vue-loader：
npm install vue-loader -D

如果无法运行或报错：
npm install vue-template-compiler -D

并在webpack.config.js文件的module:{}中进行配置：
module:{
rules:[
{test:/\.vue$/,loader:"vue-loader"},
{test:/\.css$/,loader:"style-loader!css-loader"},
{test:/\.js$/,loader:"babel-loader",query:{presets:["env","stage-0"]}}
]
}

如果运行报错：按如下修改：
在webpack.config.js文件的module:{}中修改：
module:{
rules:[
{test:/\.vue$/,loader:"vue-loader"},
{test:/\.css$/,loader:"style-loader!css-loader"},
{test:/\.js$/,loader:"babel-loader"}
]
}
这是因为：
vue-loader已经集成env和stage-0，因此在安装vue-loader后需把
",query:{presets:["env","stage-0"]}"

删除掉

webpack.config.js文件配置如下：

const path=require("path");

//webpack.config.js文件的实质是commonJS的一个标准化模块
module.exports={
//mode指定是在开发环境（development）下使用webpack
//还是在生产环境（production）下使用的，可以忽略
mode:"development",
//entry指定webpack打包的文件入口
entry:{
//入口名称：main.js
// app:path.resolve(__dirname,"common/main.js")
// app:path.resolve(__dirname,"es6/ES6main.js")
// app:path.resolve(__dirname,"mixin/js/main.js")
app:path.resolve(__dirname,"vue/main.js")
},
//output设置webpack打包后输入的文件路径及文件名称
output:{
path:path.resolve(__dirname,"./vue"),
filename:"[name].bundle.js"
},
resolve:{
//extensions用来配置项目中使用的扩展名
extensions:[".vue"]
},
module:{
rules:[
{test:/\.vue$/,loader:"vue-loader"},
{test:/\.css$/,loader:"style-loader!css-loader"},
//vue-loader已经集成env和stage-0，因此在安装vue-loader后需把
//,query:{presets:["env","stage-0"]}删除掉
// {test:/\.js$/,loader:"babel-loader",query:{presets:["env","stage-0"]}}
{test:/\.js$/,loader:"babel-loader"}
]
}
}

学习笔记-webpack安装及环境搭建

猜你喜欢