-
const htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/scripts/main.js", output: { filename: "js/[name]-[chunkhash].js", path: __dirname + "/dist/" }, plugins: [ new htmlWebpackPlugin({ filename: "index-[chunkhash].html", tempalte: "./src/index.html", inject: "head" }) ] }查看全部
-
【一】： 一对一 或 多对一; 输出文件为一个 module.exports = { // entry: "./project/src/scripts/main.js", entry: ["./project/src/scripts/main.js", "./project/src/scripts/other.js"], output: { path: __dirname + "/project/dist/scripts/", filename: "bundle.js" } } // 【二】：多对多 module.exports = { entry: { main: "./project/src/scripts/main.js", other: "./project/src/scripts/other.js" }, output: { path: __dirname + "/project/dist/scripts/", filename: "[name].js" //[xxx]有点占位符的意思,[name]文件名！ // filename: "[name]-[hash].js" //[xxx]有点占位符的意思，[hash] 每一次打包生成的hash值！ // filename: "[name]-[chunkhash].js" //[xxx]有点占位符的意思，[chunkhash]文件MD5 hash值，文件内容没有改变，MD5hash值不变！ } }查看全部
-
方法一: module.exports = { entry: "./project/src/scripts/main.js", output: { path: __dirname + "/project/dist/scripts/", //处理文件路径为绝对路径 filename: "bundle.js" } } 方法二： var path = require("path"); //引入nodejs中的path模块 module.exports = { entry: "./project/src/scripts/main.js", output: { path: path.resolve(__dirname, "./project/dist/scripts/"), //处理文件路径为绝对路径 filename: "bundle.js" } }查看全部
-
在bash中运行指令的！ 一: 1: npm install -g webpack //全局安装webpack。 2: npm install webpack --save-dev //下载安装项目开发所需模块依赖。 3: webpack xxx.js xxx.bundle.js //将xxx.js打包为xxx.bundle.js。 二: 参数 1: --module-bind //绑定模块 2: --module-bind 'css=style-loader\!css-loader' //绑定运行模块css-loader、style-loader。 //css-loader 加载引入css文件。 //style-loader 将加载引入的css文件内容插入html中。 //因为在bash中！有着特殊含义，所以这里需要\来转意。 //然后关于评论区单双引号的事情，我两个都可以执行，好像并没什么问题。 3: --watch 实时更新打包。 4: --progress 打包时显示进程时间。 5: --display-modules 打包时显示加载了那些需要的模块儿。 6: --display-reasons 打包时显示加载各个模块儿原因。查看全部
-
htmlWebpackPlugin插件配置，可以生成index带hash值，往index.html中传参如下 new htmlWebpackPlugin({ filename: 'index-[hash].html', template: 'index.html', inject: 'head', title: 'webpack is good', date: new Date() })查看全部
-
webpack 初入 如何引入js，css require css需要style-loader!css-loader顺序不能变 webpack打包命令，例如webpack hello.js hello.bundle.js webpack命令参数，命令添加模块loader，例如webpack hello.js hello.bundle.js --modules-bind 'css=style-loader!css-loader' 还有其他很多参数，例如自动监控变化自动打包 --watch， ctrl+c，结束监控 --progress --display-modules --display-reasons查看全部
-
loader 可以处理各种文件，css，sacss，.vue, png等等都可以通过这个来转换,他们都会当作做个模块查看全部
-
一、添加图片 1、css中的背景图片。 （1）安装file-loader 终端目标文件输入：npm install file-loader --save-dev 2、模板文件layer.tpl直接引用图片。 （1）绝对路径：直接写绝对路径就行。 （2）相对路径： <img src="${require('../../assets/bg.jpg')}" 3、最根部的文件index.html引用图片。 （1）绝对路径：直接写绝对路径就行。 （2）相对路径：file-loader 二、图片打包后的输出地址： 1、 query:{ name:'assets/[name]-[hash:5].[ext]' } 2、安装url-loader url-loader和file-loader相似，但是url-loader可以指定limit参数。 （1）终端目标文件输入：npm install url-loader --save-dev url-loader可以处理文件或者图片，当文件/图片大小大于指定的limit,就会丢给filel-loader去处理，当小于设定的limit，就会转为base64编码，不再是一个url(不再是一个http请求)，图片会被打包进html,css,js （2）两种图片引用方式：①通过http请求load进来。浏览器会有缓存，比较适用于重复性较高的图片。②打包成base64。任何地方要用时，都会有base64编码存在那里，会造成代码的冗余，增加代码的体积。 三、压缩图片 1、安装image-webpack-loader 终端目标文件输入：npm install image-webpack-loader --save-dev 2、先压缩文件再传给url-loader判断。查看全部
-
建项: mkdir demo cd demo npm int -初始化项目 npm install webpack --save-dev -给此项目安装webpack --save将配置写入配置文件； 打包: webpack test.js test.bundle.js --module-bind 'css=style-loader!css-loader' --watch 将test.js 打包 并绑定适合的loader --watch 监听 自动打包查看全部
-
npm i image-webpack-loader --save-dev查看全部
-
npm i url-loader --save-dev查看全部
-
npm i file-loader --save-dev查看全部
-
npm i sass-loader --save-dev查看全部
-
npm install less-loader --save-dev查看全部
-
npm i postcss-import --save-dev查看全部
举报
0/150
提交
取消