第一种webpack用法（基本不用）
1.安装
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
2.初始化项目
- 用 npm init 初始化项目
- npm install --save-dev webpack//在项目的开发环境上安装webpack
- 创建 项目文件目录
.
├── dist //这个用来 存放项目打包好 文件夹
├── node_modules //这个包含本地安装的模块的文件夹
├── package.json //初始化生成的package.json，包管理文件
└── src //开发时 存放逻辑代码的文件
└── app.js //打包的入口文件
3. 开始打包
webpack ./src/app.js ./dist/app.bundle.js //一般命令行打包
或
webpack --watch ./src/app.js ./dist/app.bundle.js//实时监听打包
或
webpack -p ./src/app.js ./dist/app.bundle.js//压缩和打包一起完成
意思就是说，把 ./src/app.js 作为源文件，把转化后的结果放到 ./dist/app.bundle.js 文件中。
第二种webpack用法（webpack-config文件）
配置文件的名字叫 webpack.config.js 位于项目根目录下
.
├── dist //这个用来 存放项目打包好 文件夹
├── node_modules //这个包含本地安装的模块的文件夹
├── package.json //初始化生成的package.json，包管理文件
└── src //开发时 存放逻辑代码的文件
└── app.js //打包的入口文件
├──webpack.config.js//webpack的配置文件
- webpack.config.js的基本内容
module.exports = {
entry: './src/app.js',//源文件
output: {
filename: './dist/app.bundle.js'//输出的目标文件
}
};
- 改造 package.json 的 scripts 部分
"scripts": {
"dev": "webpack -d --watch", //-d是用于调试定位 --watch是实时监听
"prod": "webpack -p"
},
你会发现 npm run dev 和 webpack -d --watch 的效果是一样的。
(-d 这个参数意思就是说包含 source maps，就是让你在用浏览器调试的时候，可以很方便地定位到源文件)
loader
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：
- test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
- use:用了多个加载器情况，后跟配置的数组（以下代码是实例）。
- loader：loader的名称（必须），单个加载器的情况下。
- include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
- query或option（2.5版本后用option）：为loaders提供额外的设置选项（可选）
module: {
rules: [
{//单个加载器
test: /\.js$/, // 这里一定不要用引号把它包括起来，写成'/\.js$/'
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: path.join(__dirname, 'node_modules')
},
{//多个加载器
test: /\.(scss|sass)$/,
use:['style-loader', 'css-loader', 'sass-loader']
}
]
},
1.css-loader , style-loader
- 安装
npm install --save-dev css-loader style-loader
- 准备内容
(1)src/app.css
body {
background: pink;
}
(2)src/app.js
import css from './app.css';
console.log("hello world");
- 目录结构
├── dist //这个用来 存放项目打包好 文件夹
├── node_modules //这个包含本地安装的模块的文件夹
├── package.json //初始化生成的package.json，包管理文件
└── src //开发时 存放逻辑代码的文件
└── app.js //打包的入口文件
└── app.css //css文件
└──index.html //html文件
├──webpack.config.js//webpack的配置文件
- webpack.config.js配置loader
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{//用'style-loader', 'css-loader' 处理所有以 .css 为后缀的文件转换为js
test: /\.css$/,
use: ['style-loader',
{loader: 'css-loader',
options: {
// modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
}
}
]
}
]
}
};
2.用 sass-loader 把 SASS 编译成 CSS
- 安装
npm install sass-loader node-sass --save-dev
- 准备内容
(1)src/app2.scss
body {
background: pink;
p {
color: red;
}
}
(2)src/app.js
import css from './app.css';
import css from './app2.scss';
console.log("hello world");
- webpack.config.js配置loader
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{//用'style-loader', 'css-loader' 处理所有以 .css 为后缀的文件转换为js
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}
]
}
};
3.用 extract-text-webpack-plugin 把 CSS 分离成文件
有时候我们要把 SASS 或 CSS 处理好后，放到一个 CSS 文件中，用这个插件就可以实现。
- 安装
$ npm install --save-dev extract-text-webpack-plugin
- webpack.config.js配置loader
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
}
};
4.bable
- 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
- 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；
- 安装
// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
- 配置
虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/dist',
filename: 'app.bundle.js'
},
module: {
rules: [
{//用'style-loader', 'css-loader' 处理所有以 .css 为后缀的文件转换为js
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
},
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
},
exclude: /node_modules/
}
]
}
};
.babelrc文件
{
"presets": ["react", "env"]
}
插件
版权声明的插件
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究')
],
Hot Module Replacement(模块热替换)
在webpack中实现HMR需要做两项配置
- 在webpack配置文件中添加HMR插件；
- 在Webpack Dev Server中添加“hot”参数；
webpack-dev-server构建本地服务器
让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖
- 安装
# 先全局安装
$ npm install -g webpack-dev-server
$ npm install --save-dev webpack-dev-server
配置端口号，默认是8080
devserver的配置选项 功能描述
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port 设置默认监听端口，如果省略，默认为”8080“
inline 设置为true，当源文件改变时会自动刷新页面
historyApiFallback 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
module.exports = {
entry: './src/app.js',
...
devServer: {
port: 9000,//端口号
contentBase: "./dist",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
...
};
现在我们用浏览器打开 localhost:9000可以看到效果。
我们还可以配置一运行 webpack-dev-server 的时候就自动打开浏览器。
module.exports = {
entry: './src/app.js',
...
devServer: {
port: 9000,
open: true
},
...
};
在package.json中的scripts对象中添加如下命令，用以开启本地服务器
"scripts": {
...
"server": "webpack-dev-server --open"
},
给模块起别名
别名的作用是把用户的一个请求重定向到另一个路径
配置：
resolve:{
alias:{
jquery:"./lib/jquery/jquery.js"
}
}
//在入口文件 中直接引入 jquery（require('jquery')）即可 不用再加那么多的路径