基础篇
1.新建一个文件,在当前目录下执行
npm init
然后一直回车:
可以发现,当前目录下多了一个 package.json 的文件,文件里面自动生成以下代码:
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
至此,项目初始化完成
2.执行
npm install
会发现当前目录下多了一个node_modules
3.安装项目依赖
npm install webpack -g
npm install webpack --save-dev
4.新建一个文件 webpack.config.js,之后的配置基本都写在这个文件中。
现在,我们在目录下新建一个 src 文件夹,存放我们开发所需要的页面,src下面建立 page1目录,表示 page1 页面, page2 同理。
page1 下面的 index.html 如下:
项目目录结构如下:
接下来,我们想分别以这两个页面为入口文件进行打包
为了使webpack启动方便,我们在package.json 中写以下代码:
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
如下图:
然后在webpack.config.js中写以下代码:
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件,不可漏掉!!!
module.exports = {
entry: {
page1 : __dirname + '/src/page1/index.js',// page1的入口文件,webpack是以js为入口文件的
page2 : __dirname + '/src/page2/index.js',
},
output : {
path : __dirname + '/dist',//产出路径,一般放在dist目录下
filename:'js/[name]-[chunkhash].js',
//把为入口文件放在dist目录的js文件夹下,
//name是文件名,chunkhash是每次打包文件的hash值,
//目的是如果哪个文件修改,chunkhash会改变,可以只上线修改过的文件
// publicPath: 'http://cdn.com/' //如果上线,可以改为线上地址
},
plugins: [
new HtmlWebpackPlugin({
filename : 'page1.html',//入口html
template : './src/page1/index.html',
minify : {
// removeComments:true, //删除注释
// collapseWhitespace: true //删除空格,压缩
},
chunks: ['page1'] //对应entry的入口js.这样可以按需加载js
}),
new HtmlWebpackPlugin({
filename : 'page2.html',
template : './src/page2/index.html',
minify : {
// removeComments:true, //删除注释
// collapseWhitespace: true //删除空格,压缩
},
chunks: ['page2']
}),
],
}
然后安装相应的插件
npm install webpack-cli -g
npm install webpack-cli --save-dev
npm install html-webpack-plugin --save-dev
在命令窗口运行 npm run webpack 可以看到文件在进行打包,dist目录下生成的文件
至此,初步打包基本完成~
我们看一下生成的文件
这里的 page1 只引用了 page1 的 js,这是因为我们配置 HtmlWebpackPlugin 的时候为其加了 chunks,我们的代码里面也写了备注,大家可留意学习。
应用篇——配置本地启动的服务器localhost,处理scss,css,图片等资源
我们知道文件可以打包成功后,接下来配置启动本地服务器,这样就可以在文件做出修改的时候页面自动刷新,不需要每次修改都重新打包编译了。
配置本地服务器
1.在 package.json 下面配置如下代
"start": "node_modules/.bin/webpack-dev-server",
"dev": "webpack --mode development"
放在以下位置:
2. 在 webpack.config.js 引入 path
const path = require('path');
在 webpack.config.js 配置 devServer
devServer: {
host : '127.0.0.1',
port : 8088 ,
inline : true,
open :true, //自动打开浏览器
hot : false, //慎用!打开热更新,会导致修改样式可能不支持。关闭热更新,页面会强刷
contentBase : path.join(__dirname, "dist"),
},
完整代码
运行方式:
首先,运行
npm run dev
然后,运行
npm run start
可以看到浏览器自动帮我们打开了页面
然后修改代码保存,就会发现浏览器自动刷新了修改的内容。
例如,现在打开 page1.html 如下:
此时,保存发现浏览器自动更新到了我们要的效果。
注意:此时修改 html 文件和 js 文件都生效了,但是 css 还没生效,这是因为我们还没写处理 css 的插件。另外,修改 webpack.config.js 文件和 package.json 需要重新执行 npm run start
处理CSS,SCSS文件类型
至此,html,css,js 只有 css 还没生效,我们来看怎么处理 css 文件
1.分别建立 css 文件 和 scss 文件,我们还是以 page1 为例
然后,在 index.css 下面给 body 添加背景颜色:
body{
background-color:red;
}
在 test.scss 问价下写如下样式:
body {
margin: 50px;
div {
display: flex;
}
}
上面讲过,webpack 的入口文件是 js,所以在 index.js 引入这两个 css 文件
2. 在 index.js 引入这两个 css 文件
3. 配置 webpack.config.js
module: {
rules: [
{ test: /\.(css|scss)$/,
use: [
{loader : "style-loader"},
{loader : 'css-loader?importLoaders=2',
options: {
minimize: true //css压缩
}
},
{ loader : 'postcss-loader',
options: {
plugins:function(){
return [
require('autoprefixer')({
browsers: ["last 5 versions"]
}), //添加浏览器前缀
];
}
}
},
{ loader : "sass-loader", }],
exclude: /node_modules/
},
],
},
还是给大家看一下放的位置
红色框标记的是用到的插件,一个一个安装:
npm install --save-dev css-loader style-loader
npm install sass-loader node-sass --save-dev
npm install postcss-cli autoprefixer
如果无法运行,请参考这里
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件,不可漏掉!!!
const path = require('path');
module.exports = {
entry: {
page1 : __dirname + '/src/page1/index.js',// page1的入口文件,webpack是以js为入口文件的
page2 : __dirname + '/src/page2/index.js',
},
output : {
path : __dirname + '/dist',//产出路径,一般放在dist目录下
filename:'js/[name]-[chunkhash].js',
//把为入口文件放在dist目录的js文件夹下,
//name是文件名,chunkhash是每次打包文件的hash值,
//目的是如果哪个文件修改,chunkhash会改变,可以只上线修改过的文件
// publicPath: 'http://cdn.com/' //如果上线,可以改为线上地址
},
devServer: {
host : '127.0.0.1',
port : 8088 ,
inline : true,
open :true, //自动打开浏览器
hot : false, //慎用!打开热更新,会导致修改样式可能不支持。关闭热更新,页面会强刷
contentBase : path.join(__dirname, "dist"),
},
module: {
rules: [
{ test: /\.(css|scss)$/,
use: [
{loader : "style-loader"},
{loader : 'css-loader?importLoaders=true',
// options: {
// minimize: true //css压缩
// }
},
{ loader : 'postcss-loader',
options: {
plugins: [
require("autoprefixer") /*在这里添加*/
]
}
},
{ loader : "sass-loader" }
],
exclude: /node_modules/
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.json'],
},
plugins: [
new HtmlWebpackPlugin({
filename : 'page1.html',//入口html
template : './src/page1/index.html',
minify : {
// removeComments:true, //删除注释
// collapseWhitespace: true //删除空格,压缩
},
chunks: ['page1'] //对应entry的入口js.这样可以按需加载js
}),
new HtmlWebpackPlugin({
filename : 'page2.html',
template : './src/page2/index.html',
minify : {
// removeComments:true, //删除注释
// collapseWhitespace: true //删除空格,压缩
},
chunks: ['page2']
}),
],
}
简单讲一下,postcss 是预处理,其中 autoprefixer 是自动添加浏览器前缀,比如 我们的 test.scss 文件里面写了
display:flex
会自动转化为:
scss-loader 顾名思义,就是把 scss 转化为 css
写在处理 css 资源的同级
注意:在html 引用图片使用以下方式
<img src="${require('../img/jd.png')}" alt="">
安装插件
npm install image-webpack-loader
npm install url-loader
其中, url-loader 和 file-loader 的区别代码可参考代码注释