console.log(123);
4、修改package.json
1
2
3
4
5
|
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
,
"dev"
:
"webpack --mode development"
,
// (开发模式)
"build"
:
"webpack --mode production"
// (生产模式)
},
|
5、运行npm run dev和npm run build
6、以上这些都是默认的,当然这些可以自己配置
运行npm run dev
就能看到打包后的index.bundle.js和test.bundle.js文件,
entry也可以写成数组的形式
entry: ["./src/index.js","./src/test.js"],
这个方式和对象形式结果是一样的。
8、设置webpack-dev-server
安装 npm install webpack-dev-server --save-dev
在webpack.config.js进行配置
1
2
3
4
5
6
7
8
9
10
|
devServer: {
// 设置基本目录结构
// 服务器的ip地址,也可以使用localhost
host:
"localhost"
,
// 服务端压缩是否开启
compress:
true
,
// 配置服务端口号
port: 8080
}
|
1
2
3
4
5
6
|
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
,
"serve"
:
"webpack-dev-server --mode development"
,
"dev"
:
"webpack --mode development"
,
"build"
:
"webpack --mode production"
},
|
运行npm run serve
成功
9、打包html文件
安装html-webpack-plugin,它能够帮我们插入script及link标签
npm install html-webpack-plugin --save-dev
src下新建index.html文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
在webpack.config.js中进行配置
开头引入插件
1
|
const HtmlWebpackPlugin = require(
‘html-webpack-plugin‘
)
|
在plugins配置
运行npm run serve,浏览器中打开localhost:8080
10、打包css文件
在src下新建main.css文件
1
2
3
4
5
6
7
|
#main{
height: 100px;
width: 100px;
font-size: 40px;
color:
#FF6347;
}
|
需要安装css-loader,style-loader
npm install css-loader style-loader --save-dev
webpack.config.js中配置
1
2
3
4
5
6
7
8
9
|
module: {
rules:[
// css loader
{
test: /\.css$/,
}
]
},
|
import main from ‘./main.css‘
// require(‘./main.css‘)
这两种引入方式都可以
npm run serve
效果有了
11、使用style-loader会将样式内嵌到HTML中,但是我们不希望这样,我们想在HTML中通过link标签的形式引入。
使用extract-text-webpack-plugin插件分离css
安装:
npm install extract-text-webpack-plugin --save-dev
webpack.config.dev中配置
1
2
3
|
new
ExtractTextPlugin({
filename:
"index.css"
,
})
|
1
2
3
4
5
6
7
8
9
10
11
|
rules:[
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
})
}
]
|
然后npm run build 打包,结果报错
这是因为extract-text-webpack-plugin目前版本并不支持webpack4
所以安装最新版本
npm install
[email protected] --save-dev
再次打包
如果在css中引入图片打包呐
12、css中引入图片
1
2
3
4
5
|
.bg{
height: 50px;
width: 50px;
background: url(
"./img/confirm.png"
)
}
|
npm run build 打包
报错
这是因为缺少loader,安装file-loader和url-loader
npm install file-loader url-loader --save-dev
配置:
npm run build 打包 ,成功
npm run serve 看下
有了
这里配置的时候只引用了url-loader,这是因为,url-loader封装了file-loader
url-loader工作分两种情况:
也就是说,其实我们只安装一个url-loader就可以了。但是为了以后的操作方便,所以顺便安装上file-loader。
13、html中通过img引入图片
这是因为打包后路径的问题。
使用html-withimg-loader来处理html引入的img图片
安装:
npm install html-withimg-loader --save-dev
配置
url-loader中添加
在module中添加
1
2
3
4
|
{
test: /\.(htm|html)$/i,
use: [
"html-withimg-loader"
]
}
|
然后npm run build,成功,但是dist文件夹中并没有生成images文件夹,这是因为设置了limit,如果引用的图片小于500k,url-loader将图片转换成base64格式写入js,引入一张大的试试,再打包
可以看到区别,1.jpg由于超过400k,所以就被打包到了dist/images中了
14、使用less
安装less:
npm install less --save-dev
打包需要less-loader,再安装less-loader:
npm install less-loader --save-dev
配置:
1
2
3
4
5
|
1
2
3
4
5
6
|
@bgColor:
#FFA54F;
.my{
height: 100px;
width: 100px;
}
|
对应的在index.html中添加class为my的div块
npm run serve,浏览器中就能看到了
其实和分离css文件配置基本是一样的
1
2
3
4
5
6
7
8
9
10
|
// less loader
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
}),
}
|
这时候运行npm run build 打包
已经生成
16、使用sass,配置大致相同
安装插件: