电梯网站建设,十大仓库管理软件,建设网站的目的和功能定位,深圳小程序定制公司什么是webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时#xff0c;它会递归地构建一个依赖关系图(dependency graph)#xff0c;其中包含应用程序需要的每个模块#xff0c;然后将所有这些模块打包成一个或多个…什么是webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时它会递归地构建一个依赖关系图(dependency graph)其中包含应用程序需要的每个模块然后将所有这些模块打包成一个或多个 bundle 可以做的事情 代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布
复制代码需要提前掌握的内容 需要node基础以及npm的使用掌握es6语法主要学习webpack哪些内容 webpack常见配置webpack高级配置webpack优化策略ast抽象语法树webpack中的Tapable掌握webpack流程手写webpack手写webpack中常见的loader手写webpack中常见的plugin创建文件 mkdir webpack-test cd webpack-test
mkdir src
touch src/index.js
复制代码 初始化文件 npm init -y 初始文件默认的
npm init
复制代码开始打包 npx webpack
复制代码 配置webpack.config.js touch webpack.config.jsconst path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {devServer: { // 开发服务器的配置contentBase: path.join(__dirname, dist),compress: true,port: 3000},mode: development, // 模式 默认两种production developmententry: ./src/index.js, //入口output: {filename: bundle.js, //打包后的文件名path: path.resolve(__dirname, dist), //路径必须是一个绝对路径},plugins: [// 数组放着所有的webpack插件new HtmlWebpackPlugin({template: ./src/index.html,filename: index.html})]
}
复制代码index.html !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
bodydiv idroot/divscript srcbundle.js/script
/body
/html
复制代码index.js var root document.getElementById(root);
root.innerHTML你好
复制代码webpack常见配置 npm i webpack webpack-cli -D
npm i html-webpack-plugin -D
复制代码使用模板 html html-webpack-plugin 可以指定template模板文件将会在output目录下生成html文件并引入打包后的js.npm i html-webpack-plugin -D
复制代码webpack-dev-server webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力npm i webpack-dev-server -D
复制代码pagkage.js {name: webpack-test,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1,dev: webpack-dev-server,build: webpack},keywords: [],author: ,license: ISC,devDependencies: {html-webpack-plugin: ^3.2.0,webpack: ^4.30.0,webpack-cli: ^3.3.0,webpack-dev-server: ^3.3.1}
}复制代码目前的目录 启动项目 npm run dev
复制代码 浏览器输入http://localhost:3000/ 加载样式文件 在src目录下创建一个index.cssbody{background-color:red;
}
复制代码在index.js中引入index.cssrequire(./index.css);
复制代码webpack.config.js增加一些参数module: { //模块rules: [ // 规则 css-loader // style-loader 把css插入到head的标签中// loader的特点 希望单一// loader的用法 字符串只用一个loader// 多个loader需要[]// loader的顺序 默认是从右向左执行// loader还可以写出对象方式{test: /\.css$/,use: [style-loader,css-loader]},]
}
复制代码css-loader style-loadernpm i css-loader style-loader -D
复制代码效果如下 加载lesssass,stylus类似 在src目录下创建一个index.lessbody{#root{border:1px yellow solid;color: #000;}
}
复制代码在index.js中引入index.lessrequire(./index.css);
复制代码webpack.config.js增加一些参数 {test: /\.less$/,use: [{loader: style-loader,},css-loader,less-loader]},
复制代码less-loadernpm i less less-loader -D
复制代码效果如下 提取单独打包css文件 npm i mini-css-extract-plugin -D
复制代码webpack.config.js增加一些参数const MiniCssExtractPlugin require(mini-css-extract-plugin);plugins: [ new MiniCssExtractPlugin({filename: main.css})],
module: { //模块use: [MiniCssExtractPlugin.loader,]},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,]}]}
复制代码css3样式自动加前缀 npm i postcss-loader autoprefixer -D
复制代码在webpack-test创建postcss.config.jsmodule.exports {plugins: [require(autoprefixer)]
}
复制代码webpack.config.js增加一些参数{test: /\.css$/,use: [{loader: style-loader,// options: {// insertAt: top //内联样式最高级// }},css-loader,postcss-loader]},{test: /\.less$/,use: [{loader: style-loader,},css-loader,postcss-loader,less-loader]
}
复制代码转化es6语法 npm i babel-loader babel/core babel/preset-env -D
npm i babel/plugin-proposal-class-properties -D
复制代码webpack.config.js增加一些参数rules: [
{
test: /\.js$/,
use: {loader: babel-loader,options: { // 用babel-loader 需要把es6-es5presets: [babel/preset-env],plugins: [babel/plugin-proposal-class-properties]}
}
]
复制代码全局变量引入 npm i jquery -D
npm i expose-loader -D
复制代码第一种 import $ from jquery;webpack.config.js增加一些参数 rules: [ {test: require.resolve(jquery),use: expose-loader?$},
]
复制代码第二种 webpack.config.js增加一些参数const webpack require(webpack);
plugins: [ // 数组放着所有的webpack插件new webpack.ProvidePlugin({$: jquery // 在每个模块中注入$对象})
],
复制代码引入图片处理 // 1.在js中创建图片来引入
// 2.在css引入backgroud(url)
// 3.img src alt /
npm i file-loader -D
npm i html-withimg-loader -D
复制代码webpack.config.js增加一些参数rules: [ {test: /\.html$/,use: html-withimg-loader},{test: /\.(png|jpg|gif)$/,use: file-loader},
]
复制代码限制图片大小npm i url-loader -D
复制代码webpack.config.js增加一些参数 {test: /\.(png|jpg|gif)$/,use: {loader: url-loader,options: {limit: 200*1024}}
复制代码images和css打包分类 webpack.config.js增加一些参数 plugins: [ // 数组放着所有的webpack插件new MiniCssExtractPlugin({filename: css/main.css}),
],
{test: /\.(png|jpg|gif)$/,use: {loader: url-loader,options: {limit: 1,outputPath: /img/,publicPath: https://www.baidu.com // 在图片上加域名}}
复制代码多页面打包 在scr创建一个other.jsconsole.log(other 一路走好)
复制代码webpack.config.js增加一些参数// 多入口
entry: {index: ./src/index.js, home: ./src/other.js,
},
output: {filename: [name].js, //打包后的文件名path: path.resolve(__dirname, dist), //路径必须是一个绝对路径// publicPath: https://www.baidu.com
},
plugins: [ // 数组放着所有的webpack插件new HtmlWebpackPlugin({template: ./src/index.html,filename: index.html,chunks: [index]}),new HtmlWebpackPlugin({template: ./src/index.html,filename: home.html,chunks: [home]}),
]
复制代码配置source-map调试代码 webpack.config.js增加一些参数output: {filename: [name].js, //打包后的文件名path: path.resolve(__dirname, dist), //路径必须是一个绝对路径// publicPath: https://www.baidu.com
},
// devtool: source-map, // 1.增加映射文件 可以帮我们调试源代码
// devtool: eval-source-map, // 2.不会产生单独的文件,但是可以显示行和列
// devtool: cheap-module-source-map, // 3.不会产生列但是是一个单独的映射文件产生后你可以保留起来
devtool: cheap-module-eval-source-map,// 4.不会长生文件集成在打包后的文件中不会产生列
复制代码watch实时打包 webpack.config.js增加一些参数entry: {index: ./src/index.js, home: ./src/other.js,
},
watch: true,
watchOptions: { // 监控的选项poll: 1000, // 每秒问我1000次aggregateTimeout: 500, // 防抖ignored: /node_modules/ // 不需要进行监控哪个文件
},
复制代码常用的小插件 清除dist (clean-webpack-plugin)拷贝文件(copy-webpack-plugin)版权注释(bannerPlugin)npm i clean-webpack-plugin -D
npm i copy-webpack-plugin -D
复制代码在webpack-test创建doc文件,里面创建hello.txtwebpack.config.js增加一些参数const webpack require(webpack);
const CleanWebpackPlugin require(clean-webpack-plugin);
const CopyWebpackPlugin require(copy-webpack-plugin);
plugins: [ new CleanWebpackPlugin(),new CopyWebpackPlugin([{from: doc, to: ./}]),new webpack.BannerPlugin(cl by 2019)
],
复制代码webpack跨域问题 npm i express -D
复制代码1)webpack代理在webpack-test目录下创建server.jslet express require(express);
let app express();
app.get(/user, (req, res) {res.json({ name: xiaolin3333 })
})
app.listen(3000);
复制代码webpack.config.js配置 devServer: { // 开发服务器的配置// 1)http:proxyproxy: {// 重新的方式 把请求代理到express服务器!/api: {target: http://localhost:3000,pathRewrite: {/api: }} // 配置了一个代理}},
复制代码index.jslet xhr new XMLHttpRequest();xhr.open(GET, /api/user, true);xhr.onload function() {console.log(xhr.response,);
}xhr.send();
复制代码启动 node server.js npm run dev2)前端只想单纯来模拟数据webpack.config.js配置devServer: { // 开发服务器的配置// 2)前端只想单纯来模拟数据before(app) { // 提供的方法 钩子app.get(/user, (req, res) {res.json({ name: xiaolinwww })})}
复制代码index.jslet xhr new XMLHttpRequest();
xhr.open(GET, /user, true);xhr.onload function() {console.log(xhr.response,);
}xhr.send();
复制代码启动 npm run dev3有服务端 不想用代理来处理 能不能再服务端中启动webpack端口用服务端口npm i webpack-dev-middleware -D
复制代码server.jslet express require(express);let app express();
let webpack require(webpack);// 中间件
let middle require(webpack-dev-middleware);let config require(./webpack.config);let compiler webpack(config);app.use(middle(compiler));app.get(/user, (req, res) {res.json({ name: xiaolin3333-webpack-dev-middleware })
})app.listen(3000);
复制代码index.jslet xhr new XMLHttpRequest();
xhr.open(GET, /user, true);xhr.onload function() {console.log(xhr.response,);
}xhr.send();
复制代码启动 node server http://localhost:3000/resolve属性的配置 yarn add css-loader style-loader -D
复制代码index.jsimport ./style;style.cssbody{background-color:green;transform: rotate(90deg);
}
复制代码webpack.config.js配置resolve: {// 解析第三方包 commonmodules: [path.resolve(node_modules)],extensions: [.js,.css,.vue]
// alias: { // 别名 vue vue.runtime
// bootstrap: bootstrap/dist/css/bootstrap.css
// },
// mainFields: [style, main]
// mainFields: [],// 入口文件的名字index.js
},module: { //模块rules: [ {test: /\.css$/,use: [style-loader,css-loader]},]
}
复制代码项目文件未更新 github.com/chenlin1/we…今天到此结束明天更新。。。。
