内容简介：在根目录下创建两个文件夹创建三个文件在index.html文件中写入最基础的html代码
npm install -g webpack@3.5.3 // my-demo npm init npm install --save-dev webpack@3.5.3 复制代码
在根目录下创建两个文件夹
- public
- app
创建三个文件
- index.html --放在public文件夹中
- Greeter.js-- 放在app文件夹中
- main.js-- 放在app文件夹中
在index.html文件中写入最基础的html代码
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
复制代码
在Greeter.js中定义一个返回包含问候信息的html元素的函数
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
复制代码
main.js文件中我们写入下述代码
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
复制代码
2. 正式使用
在根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
复制代码
在命令行中输入webpack即可打包
3.更快捷的执行打包任务
在package.json中对scripts对象进行相关设置即可，设置方法如下。
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "3.10.0"
}
}
复制代码
在命令行输入 npm start 即可打包
二、生成Source Maps
1. Source Maps
Source Map则可以用于还原真实的出错位置，帮助开发者更快的Debug。
2. 配置
//webpack.config.js
module.exports = {
devtool: 'eval-source-map', //新加入
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
复制代码
三、使用webpack构建本地服务器
1. webpack-dev-server
构建本地服务器，实现自动刷新等功能
2. 配置
npm install --save-dev webpack-dev-server@2.7.1 复制代码
把这些命令加到webpack的配置文件中，现在的配置文件webpack.config.js如下所示
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
复制代码
在package.json中的scripts对象中添加如下命令，用以开启本地服务器：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
复制代码
终端输入npm run server即可
四、使用babel-loader
1. babel-loader
用于将使用ES6规范的js代码，转为ES5。
2. 配置
一次性安装这些依赖包
npm install --save-dev babel-core babel-loader babel-preset-env 复制代码
对文件进行配置
\\webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env"
]
}
},
exclude: /node_modules/
}
]
}
};
复制代码
四、使用css-loader 和 style-loader
1. css-loader 和 style-loader
css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
2. css-loader 和 style-loader
安装
npm install --save-dev style-loader css-loader 复制代码
配置
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env"
]
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
]
}
};
复制代码
使用
// app/main.css
html {
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
复制代码
我们这里例子中用到的webpack只有单一的入口，其它的模块需要通过 import, require, url等与入口文件建立其关联，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中，如下
//main.js import Greeter from './Greeter'; import './main.css';//使用require导入css文件 复制代码
五、使用CSS module
1. CSS module
所有的类名，动画名默认都只作用于当前模块
2. 安装
配置
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
}
}
]
}
]
}
};
复制代码
五、使用CSS预处理器
1. 使用CSS预处理器
Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins,inheritance等不存在于CSS中的特性来写CSS。 postcss-loader 和 autoprefixer（自动添加前缀的插件）
2. 安装
npm install --save-dev postcss-loader autoprefixer 复制代码
//webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
}
}
复制代码
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
复制代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- Liunx 服务配置笔记（四）：APACHE 服务安全配置
- nginx配置笔记
- Rust笔记（一）-- 环境配置
- Kafka读书笔记 -- 安装与配置
- Istio 学习笔记（一）：配置 GateWay
- Kafka读书笔记 -- 集群安装与配置
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
