网上找了好多参考,发现好多使用的webpack1.或者2.的,看了下自己安装的webpack版本,竟然是3.0.难怪有些地方跟网上说的结果不一致。
第一步:创建项目
第二步: 使用npm来安装webPack需要的相关插件。
npm install webpack --save -dev
npm install babel-core --save -dev
npm install babel-loader --save -dev
npm install css-loader --save -dev
npm install file-loader --save -dev
npm install sass-loader --save -dev
npm install style-loader --save -dev
npm install url-loader --save -dev
npm install webpack-dev-server --save -dev
执行完了,主要是修改package.json文件。
{
"name": "webpack6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --progress --colors --inline"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.24.1"
}
}
第三步:编写webpack.config.js文件,手动添加该文件到项目跟目录下面,将以下内容copy进去。
var path=require('path');
module.exports={
entry:{
admin:'./admin/index.js',
customer:'./customer/customer.js'
},
output:{
path:path.join(__dirname,'dist'),
publicPath:'/dist/',
filename:'[name].bundle.js'
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, exclude:/node_modules/,loader: 'babel-loader' },
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
}
第四步:添加admin文件夹以及下面的相关文件。
index.js文件内容如下
import './css/index.css'
import './css/index.scss'
document.getElementById("content").innerHTML=`
这是系统测试
看看如何实现
index.html文件内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width:100%;height:30px;font-size:13px;background-color:#E2E2E2;vertical-align: center">
<div style="line-height: 30px;">左标题</div>
</div>
<p id="content"></p>
<script src="/dist/admin.bundle.js"></script>
</body>
</html>
/css/index.css的内容如下:
body,div{
margin: 0px;
padding: 0px;
}
body{
background:url(../../icons/hudie.png) gray;
}
#pageTitle:before{
content:url('../../images/scheduler.gif')
}
/css/index.scss的内容:
body{
p{
color:blue;
}
}
文件目录解构请看下图
第五步:执行npm start, 如果这里报es6的编译错误的法,请查看前面讲的babel的使用。
也就是要实现该命令,以及实现.babelrc文件
如果出现下面的错误
则执行下以下命令
cnpm install node-sass@latest
npm install --save-dev babel-preset-es2015
第六步:浏览器中输入http://localhost:8080/admin/
如果出现以下界面,表示通过webpack集成css、scss、url、图片、es6相关功能的例子已经完成。