为了账号安全,请及时绑定邮箱和手机立即绑定

webpack深入与实战

难度中级
时长 3小时21分
学习人数
综合评分9.60
259人评价 查看评价
9.8 内容实用
9.5 简洁易懂
9.5 逻辑清晰
  • webpack:前端打包工具
    查看全部
  • 我们想把一部分的js 放在head 标签里,一部分放在body标签里: 在head 里 <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.main.entry%>" 在body 里 <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.a.entry %>"></script>
    查看全部
  • htmlWebpackPluign 支持模板语言 语法 <%= %> 取值 直接运行js 代码吧=号去掉 <% for (var key in htmlWebpackPlugin){%> <%=key %> <%}%> <% for (var key in htmlWebpackPlugin.options){ %> <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key])%> <% } %>
    查看全部
  • webpack 版本3.8.1 babel配置 { test: /\.js$/, use: [ { loader: 'babel-loader', options: { presets: 'latest' } } ], include: path.resolve(__dirname, 'src'), exclude: path.resolve(__dirname, 'node_modules') },
    查看全部
  • webpack版本3.8.1 配置如下。需注意,全部开启较慢,只在production环境开启最佳 { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader' }, { loader: 'postcss-loader', options: { plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), // 使css文件可以使用@import语法进行引入 require('postcss-cssnext')(), // css兼容性转化 require('cssnano')() // 压缩,以及优化。优化有时不是想要的结构,4+版本使用最安全模式进行优化 ] } } ] }
    查看全部
  • 123
    查看全部
    0 采集 收起 来源:处理模板文件

    2017-11-12

  • 成功!
    查看全部
  • Mac命令行: 1、新建目录: mkdir name --> eg:mkdir-webpack-test 2、进入当前目录,初始化:npm install 3、安装webpack: npm install webpack --save-dve 4、建立目录:mkdir src/dist 5、初始化页面引入打包文件,bundle.js 6、建立webpack.config.js配置文件(打开官网,查看API下configuration文章,右侧有webpack的参数)。原因:寻找webpack目录下.config.js默认的配置运行. 7、在webpack.config.js配置文件编写
    查看全部
  • 官网:webpack.github.io/docs/what-is-webpack.html GitHub:github.com/webpack/webpack webpack目标: 1、会切分依赖树,会把依赖树切分到不同的代码块中, 按序加载这些依赖; 2、为了保持初始化的时间更少; 3、任何静态的资源都可以被视为一个模块,在项目中引用; 4、整合第三方类库并且把第三方的类库也当做它的模块在项目中引用; 5、可自定义,适合大型项目 与其它打包工具不同处: 1、代码分割 2、loader 3、模块热更新(开发和调试效率)
    查看全部
  • html插件: html-webpack-plugin
    查看全部
  • rules: [{ test: /\.js$/, exclude: /(node_modules|bower_components)/, include: '/(src)/', use: { loader: 'babel-loader' } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('postcss-import'), require('autoprefixer')({ broswers: ['last 5 versions'] }) ] } } ] } ]
    查看全部
  • 一、(改善)进一步加快解析速度: 1、path.resolve(__dirname,'app/src') node有个api:path,path有个方法:resolve(解析)。 __dirname:在运行环境下的变量,在当前环境的路径, 'app/src':相对路径 加快打包速度
    查看全部
  • compilation.assets[url].source() compilation: webpack 一个对象 assets:webpack处理后的文件对象 source:source方法,取这个文件的内容
    查看全部
  • htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)
    查看全部
  • minify 压缩
    查看全部

举报

0/150
提交
取消
课程须知
1、对模块化开发有一些了解 2、使用过 node 对 npm 有基本的了解 3、对打包有一个基本的概念
老师告诉你能学到什么?
1、模块化的开发 2、webpack 的 CLI (命令行) 3、webpack 如何在项目中打包 4、webpack 如何处理项目中的资源文件

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!