Webpack配置详解(package.json/webpack.config.js详细配置 )
- webpack安装
- package.json配置以及模块安装
- webpack.config.js配置
- 开启webpack-dev-server服务
- 热替换插件的安装以及配置
- 开启自动打开浏览器插件的安装以及配置
- 加载器的安装以及配置
- 完整package.json/webpack.config.js文件
webpack安装
依赖于node.js环境安装
首先安装node.js环境,http://nodejs.org/zh-cn/download/ 或者http://nodejs.cn/download/ 下载node.js相应版本并安装(推荐安装稳定版);
安装完成后,在命令小黑窗中
node -v,检查版本号,有版本号,安装正确,否则重新安装;继续检查
npm -v,检查npm版本,有版本号则继续下一步;(也可以安装npm淘宝镜像cnpm,执行命令npm install -g cnpm --registry=https://registry.npm.taobao.org)安装webpack模块
全局安装webpack模块,执行命令
npm install webpack -g(简写:npm i webpack -g),正确继续下一步;(安装较慢可以换用cnpm,下面npm均可替换cnpm)继续执行
npm install webpack --save-dev(简写:npm i webpack -D),表示在项目中安装webpack,并会在package.json中增加版本号,例"webpack": "^3.8.1"。
package.json配置以及模块安装
创建package.json文件
在小黑窗执行
npm init,初始化项目文件,根据提示写入项目名称、版本、负责人、时间等等,执行结束后会在项目文件夹中生成package.json(也可以执行npm init -y,默认项目配置);package.json配置
在package.json文件 “scripts”中增加
"build": "webpack --progress --colors",后续执行命令npm run build使用;package.json中模块安装
首先需要在全局环境下安装模块,之后在项目中安装模块。
例如安装Echarts模块,先执行
npm i -g echarts,之后在项目中执行npm i echarts -D即可。
webpack.config.js配置
引入相应的模块
var path = require('path'); var webpack = require('webpack');暴露模块
module.exports = {
entry: './index.js',//入口文件
//输出文件
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'bundle.js'
}
}
设置开启的端口号
//设置开发者工具的端口号,不设置则默认为8080端口 devServer: { inline: false, port: 8181 }
开启webpack-dev-server服务
安装webpack-dev-server依赖
在全局中安装
npm i webpack-dev-server -g,之后在项目文件夹中安装npm i webpack-dev-server -D。引入webpack-dev-server模块
在webpack.config.js文件中引入webpack-dev-server模块
var WebpackDevServer = require('webpack-dev-server');打开server服务
执行命令
webpack-dev-server,浏览器手动输入http://localhost:8080 打开server服务即可成功开启服务。或是执行命令
webpack-dev-server --open,自动会在浏览器中打开http://localhost:8080 。前提是有一个 index.html 文件指向你的 bundle,且假设 output.filename 是 bunlde.js。
热替换插件的安装以及配置
安装依赖react-hot-loader(确保使用next版本)
执行命令
npm i --save babel-loader react-hot-loader@next定义用于热替换的入口路径
entry: {
main: [
// App 入口
"./app/index",
// 开启 React 代码的模块热替换(HMR)
'react-hot-loader/patch',
// 为 webpack-dev-server 的环境打包代码
// 然后连接到指定服务器域名与端口
'webpack-dev-server/client?http://localhost:9000',
// 为热替换(HMR)打包好代码
// only- 意味着只有成功更新运行代码才会执行热替换(HMR)
'webpack/hot/only-dev-server',
],
},
配置output
output: { ... ... // 对于热替换(HMR)是必须的,让 webpack 知道在哪里载入热更新的模块(chunk) publicPath: "/" },配置module
使用 ES2015 模块使HMR正常工作,在es2015 preset设置中,将module选项设置为false。为此,需要引入react-hot-loader/babel 开启 React 代码的模块热替换(HMR)。
module: { rules: [ { // 语义解释器,将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法 test: /\.jsx?$/, include: path.resolve(__dirname, "app"), exclude: /node_modules/, // 应该应用的 loader,它相对上下文解析 // 为了更清晰,`-loader` 后缀在 webpack 2 中不再是可选的 // 查看 webpack 1 升级指南。 loader: "babel-loader", // loader 的可选项 options: { presets: [ // webpack 现在已经支持原生的 import 语句了, 并且将其运用在 tree-shaking 特性上 [ "es2015", { "modules": false } ], "react" // 转译 React 组件为 JavaScript 代码 ], plugins: [ "react-hot-loader/babel" // 开启 React 代码的模块热替换(HMR) ] }, }, ] },在webpack.config.js中模块暴露引入插件
plugins: [ // 开启全局的模块热替换(HMR) new webpack.HotModuleReplacementPlugin() ]在package.json中“scripts”定义start、dev
"start": "webpack-dev-server --hot --inline", "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base"之后在小黑窗中执行
npm start/npm run dev操作
开启自动打开浏览器插件的安装以及配置
安装OpenBrowserPlugin依赖
全局安装OpenBrowserPlugin依赖,执行命令
npm i open-browser-webpack-plugin -g,在项目中执行命令npm i open-browser-webpack-plugin -D在webpack.config.js中plugins中配置
new OpenBrowserPlugin( { url: 'http://localhost:8080/echart_demo.html' } )
加载器的安装以及配置
安装css/sass/less loader加载器
npm install file-loader css-loader style-loader sass-loader ejs-loader html-loader jsx-loader image-webpack-loader --save-dev加载器的配置
webpack.config.js配置:
module: {
//加载器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//图片文件使用 url-loader 来处理,小于8kb的直接转为base64
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
完整package.json/webpack.config.js文件
结构目录
package.json文件
{ "name": "wxf", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --hot --inline", "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base", "build": "webpack --progress --colors" }, "author": "", "license": "ISC", "devDependencies": { "echarts": "^3.7.2", "open-browser-webpack-plugin": "0.0.5", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.3" }, "dependencies": { "babel-loader": "^7.1.2", "react-hot-loader": "^3.0.0" } }webpack.config.js文件
var path = require('path');
var webpack = require('webpack');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var WebpackDevServer = require('webpack-dev-server');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'bundle.js'
},
//设置开发者工具的端口号,不设置则默认为8080端口
/*devServer: {
inline: false,
port: 8181
},*/
plugins: [
// 开启全局的模块热替换(HMR)
new webpack.HotModuleReplacementPlugin(),
new OpenBrowserPlugin(
{
url: 'http://localhost:8080/echart_demo.html'
}
)
],
module: {
loaders: [
{
test: /\.css$/,
loader: "style!css"
}
]
}
}
本文详细介绍了Webpack的安装、package.json配置、webpack.config.js配置,包括webpack-dev-server服务、热替换插件、自动打开浏览器插件的安装与配置,以及加载器的设置。
8345

被折叠的 条评论
为什么被折叠?



