-
npm i postcss-loader autoprefixer --save-dev查看全部
-
npm i style-loader css-loader --save-dev查看全部
-
module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', query: { presets: ['env'] } } ] },查看全部
-
npm install babel-preset-env --save-dev查看全部
-
npm install babel-loader babel-core查看全部
-
Version:webpack 3.10.0 css-loader style-loader的用法 1 安装 css-loader style-loader npm i style-loader css-loader --save-dev webpack.config.js中配置style-loader css-loader { test:/\.css$/, loader:'style-loader!css-loader' } css-loader其他情况，如开发环境中设置浏览器兼容性不太好的样式，解决方式：postcss-loader 2 安装postcss-loader 后处理器 npm install postcss-import 安装插件：npm install autoprefixer --save-dev 给样式自动添加各个浏览器前缀 配置： { test:/\.css$/, use:[ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), require('autoprefixer')({ browsers:['last 5 version'] }), ] } } ] } importLoaders: 1的作用：处理 .css文件中使用@import引用进来的文件，指css-loader后指定数量的loader处理import引用进来的资源查看全部
-
npm i html-webpack-plugin --save-dev查看全部
-
npm install webpack --save-dev查看全部
-
Version:webpack 3.10.0 加快打包速度：Node提供的API path 使用path中的resolve()方法解析 将相对路径改为绝对路径 module: { rules: [ { test:/\.js$/, exclude:path.resolve(__dirname+'/node_modules/'), //exclude:__dirname+'/node_modules/', //include:'/src/', include:path.resolve('/src/'), loader:'babel-loader', query: { presets:['env'] } } ] } 官网示例： path.resolve(__dirname,"app/src") 其中__dirname是当前运行环境下的路径，app/src相对路径查看全部
-
Version:webpack 3.10.0 主要内容：使用babel，指定babel插件presets，把页面中的es6代码转换成在浏览器中运行js代码 1 安装babel npm i babel-loader babel-core babel-preset-env -D (安装最新的插件 babel-preset-env 视频中安装的是npm install --save-dev babel-preset-latest) 2 webpack.config.js中参数设置 module: { rules: [ { test:/\.js$/, exclude:__dirname+'/node_modules/',//排除范围 include:'/src/',//babel-loader的处理范围 loader:'babel-loader', query: { presets:['env'] } } ] } 注意：include: __dirname + "/src"会报错 loader:'babel-loader' query: { presets:['env'] } 等效于 package.json中如下设置 "babel": { "presets": [ "env" ] } exclude,include参数的用途：babel-loader是非常耗时的语法转换，设置exclude,include可以加快打包速度查看全部
-
Version:webpack 3.10.0 自动生成html下 1 自动生成多个html页面：设置webpack.config.js中的plugins属性，多次调用plugin插件(new htmlWebpackPlugin()),同时设置对应数量的.js入口文件 2 指定生成的.html页面中包含的chunk 设置属性 chunks 或者 excludeChunks plugins: [ new htmlWebpackPlugin({ //filename:'index-[hash].html', filename:'a.html', template: 'index.html', //inject:'head', //inject:'body', inject:false, title:'this is a.html', //chunks:['main','a'] excludeChunks:['b','c'] }) 3 把初始化的脚本直接嵌入页面（不需要http请求 提高脚本的加载速度和运行速度）而不已链接的形式引入到页面 inline script: <script type="text/javascript" > <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script> src: <% for (var k in htmlWebpackPlugin.files.chunks) {%> <% if (k !== 'main') {%> <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script> <% } %> <% } %>查看全部
-
一、layer.html是模板文件 1、处理模板文件的做法：（1）webpack将模板文件当做一个字符串进行处理。（2）webpack将模板文件当成已经编译好的的模板的处理函数。 对js模板语法，模板引擎，模板的作用的认识和了解再来看这章会比较容易理解。 二、要支持html文件，安装html-loader 终端目标文件输入：npm install html-loader --save-dev 三、要支持.ejs文件或者是.tpl文件，安装ejs 终端目标文件输入：npm install ejs-loader --save-dev layer.js载入ejs模板时，返回的是一个function，这时的import tpl from './layer.tpl';中的tpl代表的不再是字符串，表示的是一个已经编译过的函数 四、react——jsx vue——jsx查看全部
-
41.webpack和npm run webpack的区别：前者是webpack默认的基本命令，后者是执行package.json里面的scripts标签。 42.html-loader可以处理webpack中的HTML模板 1.安装：npm install html-loader --save-dev 2.配置：{ test:/\.html$/, loader:'html-loader' } 3.app.js中引入并初始化： import './css/common.css'; import Layer from './components/layer/layer.js'; const App = function() { var dom = document.getElementById('app'); var layer = new Layer(); dom.innerHTML = layer.tpl; } new App(); 注意事项： 1.html-webpack-plugin 会和 html-loader冲突，如果引入html-loader 会导致<%=htmlWebpackPlugin.options.title %> 编译不出。 2.inject: 'body'不能写成head,那样获取不到app这个id,因为<div id='app'></div>是在body中。 3.编译后不会再 ./dist/index.html中显示，但在浏览器中可以显示。 43.webpack的tpl模板支持ejs语法， 1.ejs安装：cnpm install ejs-loader --save-dev 2.配置：{ test:/\.tpl$/, loader:'ejs-loader' } 3.写法： <h1>study hard! my name is <%=name%></h1> <%for(var i=0;i<arr.length;i++){%> <%=arr[i]%> <%}%> 4.传参：dom.innerHTML = layer.tpl({ name:'xiaohe', arr:['oppo','huawei','xiaomi'] });查看全部
-
3 设置上线路径 publicPath属性 output:{ path:__dirname+'/dist', filename:'js/[name]-[chunkhash].js', publicPath:'http://cdn.com/'//线上地址 } path和publicPath的区别：path是在本地指定的用来放打包后的文件的地址，publicPath是占位符，设置上线路径，打包后index.html中.js文件路径替换为以上线路径为开头的路径 eg:<script type="text/javascript" src="http://cdn.com/js/main-e788f47bed10bb13350c.js"> <script type="text/javascript" src="http://cdn.com/js/a-2a2e1ae69e12b7de304a.js"></script> 满足上线需求 4 压缩.html文件上线 设置属性minify plugins: [ new htmlWebpackPlugin({ minify:{ removeComments:true,//删除注释 collapseWhitespace:true//删除空格 } }) ]查看全部
-
Version:webpack 3.10.0 自动化生成html中 1 webpack.config.js中plugins属性传参，在index.html模板中引用 webpack.config.js传参title,date plugins: [ new htmlWebpackPlugin({ filename:'index.html',//查看每次打包更新后的结果 template: 'index.html', inject:false, title:'webpack is good', date:new Date() }) ] index.html模板中获取属性值 <%= htmlWebpackPlugin.options.title%> <%= htmlWebpackPlugin.options.date%> <%= %>指取值 2 遍历htmlWebpackPlugin对象 <% for (var key in htmlWebpackPlugin.files) {%> <%= key %>:<%= JSON.stringify(htmlWebpackPlugin.files[key]) %> <%}%> <% for (var key in htmlWebpackPlugin.options) {%> <%= key %>:<%= JSON.stringify(htmlWebpackPlugin.options[key]) %> <%}%> 对象内容是JSON脚本，将遍历结果用JSON.stringify字符串化 通过遍历的结果可以方便的把我们想要的内容放在任意的位置： main.js放在head标签中： src="<%= htmlWebpackPlugin.files.chunks.main.entry%>">a.js放在body标签中：src="<%= htmlWebpackPlugin.files.chunks.a.entry%>" 注意：inject属性值改为false查看全部
举报
0/150
提交
取消